/* V50 Meet Jenica editorial refresh: cream pages, black type, script greetings,
   typewriter body copy, polaroid photos. Loaded last on /about/ only. */
.about-page {
  --about-black: #141110;
  --about-cream-v50: #fbf7ef;
  --about-type: "Courier Prime", "Courier New", monospace;
}

/* ---------- Hero: giant name, cutout overlapping it, labels + doodles ---------- */
.about-hero.about-hero-v50 {
  padding: 0;
  background: linear-gradient(180deg, #eee3d9 0%, #f5ede4 62%, #f2e8de 100%);
  overflow: hidden;
}
.about-hero-v50 .about-hero-stage {
  position: relative;
  width: min(1260px, calc(100% - 48px));
  margin: 0 auto;
  padding: clamp(34px, 5vw, 64px) 0 0;
  text-align: center;
}
.about-hero-v50 .about-hero-kicker { margin: 0 0 4px; }
.about-hero-v50 h1 {
  position: relative;
  z-index: 1;
  max-width: none;
  margin: 0;
  color: var(--about-black);
  font: 500 clamp(58px, 8.4vw, 136px)/.86 var(--serif);
  letter-spacing: -.035em;
  text-transform: uppercase;
  white-space: nowrap;
}
.about-hero-v50 h1 span { display: inline; }
.about-hero-v50 h1 em { font-style: italic; text-transform: none; }

.about-hero-v50 .about-hero-layout {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(18px, 3vw, 44px);
  margin-top: clamp(14px, 2vw, 28px);
}
.about-hero-v50 .about-hero-image {
  position: relative;
  top: auto;
  right: auto;
  width: auto;
  max-width: none;
  min-height: 0;
  margin: 0;
  padding: 0;
  align-self: end;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  overflow: visible;
  transform: none;
}
.about-hero-v50 .about-hero-image img {
  display: block;
  width: auto;
  height: clamp(420px, 44vw, 610px);
  max-width: 100%;
  margin: 0 auto;
  border-radius: 0;
  object-fit: contain;
  filter: drop-shadow(0 26px 30px rgba(35,8,12,.2));
}
.about-hero-side {
  display: grid;
  gap: 14px;
  align-content: center;
  padding-bottom: 40px;
}
.about-hero-side-left { justify-items: start; text-align: left; }
.about-hero-side-right { justify-items: end; text-align: right; }
.about-hero-label {
  margin: 0;
  color: var(--about-black);
  font: 700 13px/1.35 var(--about-type);
  letter-spacing: .05em;
  text-transform: uppercase;
}
.about-doodle-arrow {
  width: 104px;
  height: 52px;
  fill: none;
  stroke: var(--about-black);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.about-doodle-arrow-flip { transform: scaleX(-1); }
.about-hero-v50 .about-hero-notes { margin: 6px 0 0; gap: 14px; }
.about-hero-side-right .about-hero-notes { justify-content: flex-end; }
.about-hero-v50 .about-note { box-shadow: 0 16px 26px rgba(44,26,22,.16); }
.about-hero-signoff-line {
  margin: 10px 0 0;
  color: var(--about-black);
  font: italic 500 clamp(22px, 2.2vw, 30px)/1.1 var(--serif);
}
.about-hero-v50 .about-hero-actions { justify-content: flex-end; }
.about-button-outline { border-color: var(--about-black); color: var(--about-black); background: transparent; }
.about-button-outline:hover { background: var(--about-black); color: var(--paper); }

/* The single merged ticker sits as the wine band at the foot of the hero. */
.about-hero-v50 .about-hero-ticker {
  margin: 0 calc(50% - 50vw);
  border: 0;
  background: var(--wine);
  -webkit-mask-image: none;
  mask-image: none;
}
.about-hero-v50 .about-hero-ticker-track span { padding: 18px 0; color: var(--paper); }

/* ---------- Shared type across the rest of the page ---------- */
.about-page main .kicker {
  margin: 0 0 6px;
  color: var(--wine);
  font: 700 clamp(34px, 3.4vw, 46px)/1 "Corinthia", cursive;
  letter-spacing: 0;
  text-transform: none;
}
.about-page .about-closing-copy .kicker { color: var(--about-gold); }
.about-page .about-copy h2,
.about-page .about-origin h2,
.about-page .about-offclock-head h2 {
  color: var(--about-black);
  font-size: clamp(42px, 5.4vw, 80px);
  line-height: .94;
  letter-spacing: -.03em;
  text-transform: uppercase;
}
.about-page .about-offclock-head h2 { font-size: clamp(46px, 6.2vw, 94px); }
.about-page .about-copy p,
.about-page .about-origin-copy p {
  color: #1d1917;
  font: 400 17px/1.8 var(--about-type);
}
.about-page .about-copy .about-big {
  color: var(--about-black);
  font: italic 500 clamp(26px, 3vw, 40px)/1.2 var(--serif);
}
.about-page .about-offclock-head p,
.about-page .about-facts-carousel-head p {
  color: #1d1917;
  font: 400 15px/1.75 var(--about-type);
}
.about-page .about-closing-copy p:not(.final-line) { font-family: var(--about-type); font-size: 15px; }

/* ---------- Section backgrounds ---------- */
.about-page .about-intro,
.about-page .about-wired { background: var(--about-cream-v50); }
.about-page .about-origin { background: #f3ebe1; }

/* ---------- Polaroid photos ---------- */
.about-page .about-work-image,
.about-page .about-founder-note-image-single {
  position: relative;
  padding: 14px 14px 0;
  overflow: visible;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 24px 44px rgba(44,26,22,.16);
}
.about-page .about-work-image { padding-bottom: 54px; transform: rotate(2deg); }
.about-page .about-founder-note-image-single { transform: rotate(-1.5deg); }
.about-page .about-work-image::before,
.about-page .about-founder-note-image-single::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: -14px;
  left: 50%;
  width: 110px;
  height: 30px;
  background: rgba(234,212,207,.82);
  transform: translateX(-50%) rotate(-4deg);
}
.about-page .about-work-image img,
.about-page .about-founder-note-image-single img {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  border-radius: 0;
  object-fit: contain;
}
.about-page .about-founder-note-image-single figcaption {
  padding: 16px 6px 20px;
  color: #1d1917;
  font: 700 12px/1.5 var(--about-type);
  letter-spacing: .02em;
  text-transform: none;
}

/* ---------- Oversized "MY VALUES"-style scrolling statement ---------- */
.about-giant-word {
  overflow: hidden;
  padding: clamp(26px, 4vw, 56px) 0;
  background: var(--about-cream-v50);
}
.about-giant-track {
  display: flex;
  width: max-content;
  animation: about-giant-scroll 38s linear infinite;
}
.about-giant-track > div { display: flex; align-items: center; }
.about-giant-item {
  display: inline-block;
  padding: 0 .12em;
  color: var(--about-black);
  font: 600 clamp(104px, 13vw, 200px)/.9 var(--serif);
  letter-spacing: -.07em;
  text-transform: uppercase;
  white-space: nowrap;
  transform: scale(.72, 1.18);
  transform-origin: center;
  margin: 0 -.14em;
}
.about-giant-mark {
  display: inline-block;
  margin: 0 .5em;
  color: var(--wine);
  font-size: clamp(34px, 4vw, 60px);
  line-height: 1;
}
.about-giant-static { display: none; }
@keyframes about-giant-scroll { to { transform: translate3d(-50%, 0, 0); } }

/* ---------- Tablet ---------- */
@media (max-width: 900px) {
  .about-hero-v50 .about-hero-layout { grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); }
  .about-hero-v50 .about-hero-image img { height: clamp(360px, 52vw, 460px); }
  .about-doodle-arrow { width: 78px; height: 40px; }
  .about-hero-label { font-size: 11px; }
}

/* ---------- Mobile ---------- */
@media (max-width: 620px) {
  .about-hero-v50 .about-hero-stage { width: calc(100% - 32px); padding-top: 26px; }
  .about-hero-v50 h1 { font-size: clamp(54px, 17vw, 84px); line-height: .88; white-space: normal; }
  .about-hero-v50 h1 span { display: block; }
  .about-hero-v50 .about-hero-layout {
    grid-template-columns: 1fr 1fr;
    gap: 14px 12px;
    margin-top: -14px;
  }
  .about-hero-v50 .about-hero-image { grid-column: 1 / -1; grid-row: 1; justify-self: center; }
  .about-hero-v50 .about-hero-image img { height: clamp(320px, 92vw, 400px); }
  .about-hero-side { display: contents; }
  .about-doodle-arrow, .about-hero-v50 .about-hero-notes { display: none; }
  .about-hero-side-left .about-hero-label { grid-column: 1; text-align: left; }
  .about-hero-side-right .about-hero-label { grid-column: 2; grid-row: 2; text-align: right; }
  .about-hero-signoff-line { grid-column: 1 / -1; margin: 6px 0 0; text-align: center; font-size: 24px; }
  .about-hero-v50 .about-hero-actions { grid-column: 1 / -1; margin-bottom: 26px; }
  .about-hero-v50 .about-hero-ticker-track span { padding: 14px 0; }
  .about-page main .kicker { font-size: 34px; }
  .about-page .about-copy h2,
  .about-page .about-origin h2,
  .about-page .about-offclock-head h2 { font-size: clamp(36px, 11vw, 48px); overflow-wrap: normal; }
  .about-page .about-copy p,
  .about-page .about-origin-copy p { font-size: 15px; line-height: 1.75; }
  .about-page .about-work-image { padding-bottom: 46px; transform: rotate(1deg); }
  .about-page .about-founder-note-image-single { transform: rotate(-1deg); }
  .about-giant-item { font-size: clamp(84px, 26vw, 116px); }
  .about-giant-mark { font-size: 28px; }
  .about-giant-track { animation-duration: 26s; }
}

@media (prefers-reduced-motion: reduce) {
  .about-giant-track { display: none; }
  .about-giant-static {
    display: block;
    margin: 0;
    padding: 0 16px;
    color: var(--about-black);
    font: 600 clamp(44px, 9.5vw, 150px)/.9 var(--serif);
    letter-spacing: -.04em;
    text-align: center;
    text-transform: uppercase;
  }
}

/* ---------- V60: oxblood accents, motion moments, layout fixes ---------- */

/* Script kickers were losing to the typewriter paragraph rules; restore them. */
.about-page main p.kicker {
  color: var(--wine);
  font: 700 clamp(34px, 3.4vw, 46px)/1 "Corinthia", cursive;
}
.about-page main .about-closing-copy p.kicker { color: var(--about-gold); }

/* Oxblood accents */
.about-page .about-wired .about-copy .about-big,
.about-page .about-close-enough { color: var(--wine); }

/* Opening intro flows straight into the giant "Consider it handled" banner. */
.about-page .about-intro { padding-bottom: clamp(28px, 4vw, 52px); }
.about-page .about-intro .about-copy .about-big { margin-bottom: 0; }
.about-page .about-giant-word { padding: clamp(10px, 2vw, 28px) 0 clamp(18px, 3vw, 40px); }
.about-page .about-wired { padding-top: clamp(52px, 7vw, 96px); }

/* "I make complicated things look suspiciously easy." rises in word by word. */
.about-rise-word { display: inline-block; }
.about-motion-ready .about-rise .about-rise-word {
  opacity: 0;
  transform: translateY(.55em) rotate(2deg);
}
.about-motion-ready .about-rise.is-in .about-rise-word {
  animation: about-rise-word .78s cubic-bezier(.34, 1.56, .64, 1) calc(var(--i) * 85ms) both;
}
@keyframes about-rise-word {
  0% { opacity: 0; transform: translateY(.55em) rotate(2deg); }
  55% { opacity: 1; }
  100% { opacity: 1; transform: none; }
}

/* ---------- Desk photo: sticky note replaces the old pink pill ---------- */
.about-page .about-work-image::after { content: none; }
.about-work-note {
  position: absolute;
  z-index: 3;
  left: 57%;
  top: 52%;
  width: clamp(132px, 38%, 172px);
  padding: 26px 16px 16px;
  background: #f6eedf;
  color: var(--wine);
  font: 700 clamp(26px, 2.3vw, 31px)/1 "Corinthia", var(--serif);
  box-shadow: 0 16px 26px rgba(44,26,22,.22);
  transform: translate(-50%, -50%) rotate(-6deg);
}
.about-work-note span {
  display: block;
  margin-bottom: 8px;
  color: rgba(43,23,20,.6);
  font: 700 8px/1 var(--sans);
  letter-spacing: .18em;
  text-transform: uppercase;
}
.about-work-note::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 50%;
  width: 70px;
  height: 20px;
  background: rgba(234,212,207,.88);
  transform: translateX(-50%) rotate(3deg);
}
.about-motion-ready .about-work-note[data-motion] {
  opacity: 0;
  transform: translate(-50%, calc(-50% - 14px)) rotate(-14deg) scale(1.12);
}
.about-motion-ready .about-work-note.is-in {
  animation: about-note-press .7s cubic-bezier(.3, 1.4, .5, 1) .3s both;
}
@keyframes about-note-press {
  0% { opacity: 0; transform: translate(-50%, calc(-50% - 14px)) rotate(-14deg) scale(1.12); box-shadow: 0 30px 40px rgba(44,26,22,.18); }
  60% { opacity: 1; }
  100% { opacity: 1; transform: translate(-50%, -50%) rotate(-6deg); box-shadow: 0 16px 26px rgba(44,26,22,.22); }
}

/* ---------- Carousel intro sits close to its arrows ---------- */
.about-page .about-offclock-head { margin-bottom: clamp(26px, 4vw, 48px); }

/* ---------- Closing: red copy first, typing photo after ---------- */
.about-page .about-closing-grid { grid-template-columns: 1fr; min-height: 0; }
.about-page .about-closing-copy { min-height: min(760px, 88vh); border-radius: 28px; }

@media (max-width: 900px) {
  .about-page .about-closing-copy { min-height: 0; border-radius: 28px; }

}

@media (max-width: 620px) {
  .about-page main p.kicker { font-size: 34px; }
  .about-page .about-intro { padding-bottom: 26px; }
  .about-page .about-wired { padding-top: 52px; }
  .about-work-note { width: 132px; padding: 22px 13px 13px; font-size: 25px; }
  .about-page .about-offclock-head { margin-bottom: 26px; }
  .about-page .about-offclock-aside { gap: 20px; }
  .about-page .about-facts-carousel { gap: 16px; }
  .about-page .about-facts-carousel-head {
    flex-direction: row;
    align-items: center;
    gap: 14px;
  }
  .about-page .about-facts-carousel-head p { font-size: 13px; line-height: 1.55; }
  .about-page .about-facts-controls { flex-shrink: 0; }
}

/* ---------- V61: typing photo break, objects, collage, mobile notes ---------- */

/* Typing photo breaks up the opening, styled like the other polaroids. */
.about-typing-break {
  position: relative;
  width: min(520px, calc(100% - 48px));
  margin: clamp(48px, 6vw, 80px) auto 0;
  padding: 14px 14px 54px;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 24px 44px rgba(44,26,22,.16);
  transform: rotate(-1.5deg);
}
.about-typing-break::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: -14px;
  left: 50%;
  width: 110px;
  height: 30px;
  background: rgba(234,212,207,.82);
  transform: translateX(-50%) rotate(3deg);
}
.about-typing-break img { display: block; width: 100%; height: auto; }

/* Off-the-clock objects: small, tilted, gently floating. */
.about-page .about-offclock-objects { display: block; height: 300px; }
.offclock-obj {
  position: absolute;
  height: auto;
  mix-blend-mode: multiply;
  transform: rotate(var(--tilt, 0deg));
  animation: offclock-float var(--float, 6s) ease-in-out var(--delay, 0s) infinite alternate;
}
.offclock-obj-clock { --tilt: -8deg; --float: 6.5s; top: 0; left: 2%; width: 118px; }
.offclock-obj-spritz { --tilt: 6deg; --float: 5.5s; --delay: -2s; top: 64px; left: 36%; width: 82px; }
.offclock-obj-cassette { --tilt: 7deg; --float: 7s; --delay: -1s; top: 8px; right: 2%; width: 168px; }
.offclock-obj-delete { --tilt: -10deg; --float: 6s; --delay: -3s; bottom: 6px; right: 12%; width: 92px; }
@keyframes offclock-float {
  from { transform: translateY(0) rotate(var(--tilt, 0deg)); }
  to { transform: translateY(-8px) rotate(calc(var(--tilt, 0deg) + 2deg)); }
}

/* Collage banner drifts sideways under the fun-fact cards. */
.about-offclock-collage {
  overflow: hidden;
  margin-top: clamp(28px, 4vw, 56px);
}
.about-offclock-collage-track {
  display: flex;
  width: max-content;
  animation: about-collage-drift 60s linear infinite;
}
.about-offclock-collage-track img {
  display: block;
  width: auto;
  height: clamp(130px, 16vw, 220px);
  margin-right: 24px;
}
@keyframes about-collage-drift { to { transform: translate3d(-50%, 0, 0); } }

/* Faint Scorpio doodle behind the astrology fact. */
.about-page .about-facts-scroll .about-fact-astro {
  background-image: url("/assets/about-obj-scorpio.webp");
  background-repeat: no-repeat;
  background-position: right 14px top 12px;
  background-size: 74px auto;
  background-blend-mode: multiply;
}

@media (max-width: 900px) {
  .about-page .about-offclock-objects {
    display: block;
    width: 100%;
    max-width: 440px;
    height: 160px;
  }
  .offclock-obj-clock { top: 0; left: 2%; width: 25%; }
  .offclock-obj-spritz { top: 10px; left: 30%; width: 14%; }
  .offclock-obj-cassette { top: 6px; left: 50%; right: auto; width: 33%; }
  .offclock-obj-delete { bottom: 0; right: 2%; width: 17%; }
}

@media (max-width: 620px) {
  .about-typing-break { width: calc(100% - 40px); padding: 10px 10px 40px; transform: rotate(-1deg); }

  /* Hero sticky notes return as one tidy row under the portrait. */
  .about-hero-v50 .about-hero-layout { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .about-hero-v50 .about-hero-image { grid-column: 1 / -1; }
  .about-hero-side-left .about-hero-label { grid-column: 1 / 4; grid-row: 2; }
  .about-hero-side-right .about-hero-label { grid-column: 4 / 7; grid-row: 2; }
  .about-hero-v50 .about-hero-notes {
    display: flex;
    gap: 8px;
    margin: 4px 0 0;
    padding: 0;
    grid-row: 3;
    align-items: flex-start;
  }
  .about-hero-side-left .about-hero-notes { grid-column: 1 / 5; }
  .about-hero-side-right .about-hero-notes { grid-column: 5 / 7; justify-content: stretch; }
  .about-hero-v50 .about-note {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    min-height: 0;
    padding: 20px 9px 11px;
    font-size: 19px;
    line-height: 1.02;
    overflow-wrap: break-word;
  }
  .about-hero-v50 .about-note span { margin-bottom: 6px; font-size: 6.5px; letter-spacing: .12em; }
  .about-hero-v50 .about-note::before { width: 46px; height: 14px; top: -7px; }
  .about-hero-v50 .about-note-cream { transform: rotate(2.5deg) translateY(6px); }
  .about-hero-v50 .about-hero-actions { grid-column: 1 / -1; grid-row: 4; margin-top: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .offclock-obj { animation: none; }
  .about-offclock-collage-track { width: auto; justify-content: center; animation: none; }
  .about-offclock-collage-track img + img { display: none; }
  .about-offclock-collage-track img { max-width: 100%; height: auto; }
}

/* ---------- V62: banner in the origin story, paper-airplane note, stickers ---------- */

/* "Consider it handled" runs full width between the story and the filing photo. */
.about-page .about-giant-word-origin {
  margin: clamp(18px, 3vw, 40px) 0 clamp(30px, 4vw, 56px);
  padding: 0;
  background: transparent;
}
.about-page .about-origin-copy > p:last-child { margin-bottom: 0; }
.about-page .about-origin-after .about-founder-note-image-single { margin-top: 0; }
@media (max-width: 900px) {
  .about-origin-spacer { display: none; }
}

/* Push pin replaces the tape on the filing cabinet polaroid. */
.about-page .about-founder-note-image-single::before {
  top: -30px;
  width: 46px;
  height: 56px;
  background: url("/assets/about-sticker-push-pin.webp") center / contain no-repeat;
  filter: drop-shadow(0 6px 6px rgba(44,26,22,.28));
  transform: translateX(-50%) rotate(8deg);
}

/* Desk photo: smaller note tucked over the desk corner, nameplate on the frame. */
.about-page .about-wired { position: relative; }
.about-work-note {
  left: 74%;
  top: 70%;
  width: clamp(112px, 30%, 150px);
  padding: 22px 13px 14px;
  font-size: clamp(22px, 2vw, 27px);
}
.about-work-note .about-work-note-label {
  display: block;
  margin-bottom: 8px;
  color: rgba(43,23,20,.6);
  font: 700 8px/1 var(--sans);
  letter-spacing: .18em;
  text-transform: uppercase;
}
.about-work-note .about-note-line,
.about-work-note .about-note-word {
  margin: 0;
  color: inherit;
  font: inherit;
  letter-spacing: normal;
  text-transform: none;
}
.about-work-note .about-note-line { display: block; }
.about-work-note .about-note-word { display: inline-block; }
.about-note-pen {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  width: 46px;
  height: auto;
  opacity: 0;
  pointer-events: none;
  filter: drop-shadow(-4px 8px 6px rgba(44,26,22,.3));
}
.about-plane-ready .about-note-word { clip-path: inset(0 100% 0 0); }

.about-work-nameplate {
  position: absolute;
  z-index: 3;
  right: 16px;
  bottom: -14px;
  width: min(46%, 210px);
  height: auto;
  filter: drop-shadow(0 8px 10px rgba(44,26,22,.28));
  transform: rotate(-3deg);
}

/* The paper airplane only ever flies inside this section. */
.about-plane-sky {
  position: absolute;
  inset: 0;
  z-index: 6;
  overflow: hidden;
  pointer-events: none;
}
.about-plane {
  position: absolute;
  left: 0;
  top: 0;
  width: 58px;
  height: 36px;
  padding: 0;
  border: 0;
  background: none;
  opacity: 0;
  offset-rotate: auto;
  pointer-events: auto;
  cursor: pointer;
  filter: drop-shadow(0 10px 8px rgba(44,26,22,.22));
  -webkit-tap-highlight-color: transparent;
}
.about-plane svg { display: block; width: 100%; height: 100%; overflow: visible; }
.about-plane-top { fill: #f6eedf; stroke: var(--wine); stroke-width: 1.4; stroke-linejoin: round; }
.about-plane-wing { fill: #e8dccb; stroke: var(--wine); stroke-width: 1.4; stroke-linejoin: round; }
.about-plane-fold { fill: #d9c8b3; stroke: var(--wine); stroke-width: 1.2; stroke-linejoin: round; }
.about-plane.is-landed { animation: about-plane-bob 3.2s ease-in-out infinite alternate; }
@keyframes about-plane-bob { to { translate: 0 -4px; } }

/* Fun-fact cards: a sticker in the empty space, tighter cards on phones. */
.about-fact-sticker {
  display: block;
  align-self: flex-end;
  width: var(--sticker-w, 96px);
  height: auto;
  margin: 10px 0 auto auto;
  filter: drop-shadow(0 8px 10px rgba(20,10,8,.3));
  transform: rotate(var(--sticker-tilt, 5deg));
}
.about-fact-sticker-phone { --sticker-w: 104px; --sticker-tilt: -8deg; }
.about-fact-sticker-crying { --sticker-w: 92px; --sticker-tilt: 7deg; border-radius: 50%; }
.about-fact-sticker-clip { --sticker-w: 62px; --sticker-tilt: 12deg; margin-top: -26px; margin-right: -6px; }
.about-fact-sticker-smile { --sticker-w: 92px; --sticker-tilt: -6deg; }
.about-fact-sticker-can { --sticker-w: 60px; --sticker-tilt: 14deg; }
.about-fact-sticker-bore { --sticker-w: 136px; --sticker-tilt: -4deg; }
.about-fact-sticker-voyage { --sticker-w: 132px; --sticker-tilt: 4deg; }

/* Gold pen joins the off-the-clock objects. */
.offclock-obj-pen { --tilt: 28deg; --float: 7.5s; --delay: -4s; bottom: 0; left: 12%; width: 72px; mix-blend-mode: normal; }

/* "Today is going to be a good day" receipt taped to the closing block. */
.about-page .about-closing-copy { position: relative; }
.about-closing-receipt {
  position: absolute;
  top: -26px;
  right: clamp(18px, 4vw, 48px);
  width: clamp(80px, 9vw, 122px);
  height: auto;
  filter: drop-shadow(0 12px 14px rgba(20,8,8,.32));
  transform: rotate(7deg);
}

@media (max-width: 900px) {
  .offclock-obj-pen { bottom: 0; left: 50%; width: 12%; }
}

@media (max-width: 620px) {
  .about-work-note { left: 76%; top: 72%; width: 104px; padding: 18px 10px 11px; font-size: 20px; }
  .about-work-note .about-work-note-label { margin-bottom: 6px; font-size: 6.5px; }
  .about-work-note::before { width: 52px; height: 15px; top: -8px; }
  .about-note-pen { width: 36px; }
  .about-page .about-work-image { padding-bottom: 34px; }
  .about-work-nameplate { right: 10px; bottom: -12px; width: 46%; }
  .about-plane { width: 46px; height: 29px; }

  .about-page .about-founder-note-image-single::before { top: -26px; width: 38px; height: 46px; }

  .about-page .about-facts-carousel-head { justify-content: flex-end; }
  .about-page .about-facts-carousel-head p { display: none; }
  .about-page .about-facts-scroll .about-fact { min-height: 0; padding: 24px 22px 26px; }
  .about-page .about-facts-scroll .about-fact p { margin-top: 18px; font-size: 21px; line-height: 1.14; }
  .about-page .about-facts-scroll .about-fact-quote p { font-size: 20px; }
  .about-fact-sticker { width: calc(var(--sticker-w, 96px) * .86); }

  .about-page .about-closing-copy { padding-top: 62px; }
  .about-closing-receipt { top: -22px; right: 18px; width: 70px; }
}