/* Shared navigation and public glass actions. Loaded after each page stylesheet. */
:root {
  --shell-ink: #131211;
  --shell-muted: #2c2a26;
  --shell-paper: #fffdf7;
  --shell-yellow: #ffd93d;
  --shell-yellow-deep: #f5c518;
  --shell-ease: cubic-bezier(.22, 1, .36, 1);
}

.top-blur-scrim {
  position: fixed;
  z-index: 89;
  inset: 0 0 auto;
  height: 0;
  overflow: visible;
  pointer-events: none;
  background: transparent;
  -webkit-mask-image: none;
  mask-image: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.top-blur-scrim > div {
  position: absolute;
  inset: 0 0 auto;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, transparent 100%);
}

/* Two masked layers read the same as the old four-step ramp; every backdrop-filter
   re-samples the page on each scroll frame, so fewer layers keeps scrolling smooth. */
.top-blur-tl1 {
  height: 52px;
  -webkit-backdrop-filter: blur(18px) saturate(175%);
  backdrop-filter: blur(18px) saturate(175%);
}

.top-blur-tl3 {
  height: 140px;
  -webkit-backdrop-filter: blur(6px) saturate(155%);
  backdrop-filter: blur(6px) saturate(155%);
}

.top-blur-tl2,
.top-blur-tl4 {
  display: none;
}

.top-blur-fog {
  height: 160px;
  background: linear-gradient(to bottom, rgba(255, 253, 247, .48), rgba(255, 253, 247, .16) 48%, transparent);
}

.nav-wrap {
  position: sticky;
  z-index: 100;
  top: 16px;
  padding: 0 24px;
}

.nav {
  position: relative;
  z-index: 3;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: 28px;
  width: 100%;
  max-width: 1200px;
  min-height: 60px;
  margin: 0 auto;
  padding: 8px 8px 8px 22px;
  overflow: hidden;
  color: var(--shell-ink);
  border: 1px solid rgba(255, 255, 255, .78);
  border-radius: 999px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .58), rgba(255, 249, 224, .28));
  box-shadow: 0 14px 42px -22px rgba(24, 20, 12, .42), 0 0 34px -14px rgba(255, 210, 42, .46), inset 0 1px 0 rgba(255, 255, 255, .94), inset 0 -1px 0 rgba(120, 94, 20, .1);
  -webkit-backdrop-filter: blur(24px) saturate(170%);
  backdrop-filter: blur(24px) saturate(170%);
}

.nav::before {
  content: '';
  position: absolute;
  z-index: 0;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle 190px at var(--mx, 50%) var(--my, 50%), rgba(255, 225, 88, .3), rgba(255, 192, 34, .08) 52%, transparent 76%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s ease;
}

.nav::after {
  content: '';
  position: absolute;
  z-index: 0;
  top: 0;
  right: 7%;
  left: 7%;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(255, 255, 255, .98), transparent);
  pointer-events: none;
}

.nav > * {
  position: relative;
  z-index: 1;
}

.nav .brand {
  flex: 0 0 auto;
  color: var(--shell-ink);
  font-family: "Inter", "Anuphan", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 19px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.03em;
  white-space: nowrap;
}

.nav .brand-dot {
  color: var(--shell-yellow-deep);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-right: auto;
}

.nav-links a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 6px 12px;
  color: var(--shell-muted);
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  transition: color .2s ease, background .2s ease, transform .2s var(--shell-ease), box-shadow .2s ease;
}

.nav-links a:hover {
  color: var(--shell-ink);
  background: rgba(255, 255, 255, .36);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .62);
  transform: translateY(-1px);
}

.nav-links a.active,
.nav-links a[aria-current="page"] {
  color: var(--shell-ink);
  background: linear-gradient(145deg, rgba(255, 234, 122, .42), rgba(255, 205, 53, .18));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7);
  font-weight: 700;
}

.nav-hamburger {
  display: none;
  flex: 0 0 44px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  min-height: 44px;
  margin-left: auto;
  padding: 0;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .52);
  border-radius: 50%;
  background: rgba(255, 255, 255, .28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .65);
  touch-action: manipulation;
}

.nav-hamburger:hover {
  background: rgba(255, 255, 255, .5);
}

.ham-bar {
  display: block;
  width: 20px;
  height: 2px;
  margin: 0;
  border-radius: 2px;
  background: var(--shell-ink);
  transition: transform .22s var(--shell-ease), opacity .18s ease;
}

.ham-open .ham-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.ham-open .ham-bar:nth-child(2) { opacity: 0; transform: scaleX(0); }
.ham-open .ham-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu {
  position: fixed;
  z-index: 2;
  inset: 0;
  animation: shell-menu-fade .18s ease-out;
}

.mobile-menu-backdrop {
  position: absolute;
  z-index: 0;
  inset: 0;
  background: rgba(19, 18, 17, .42);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

.mobile-menu-panel {
  position: absolute;
  z-index: 1;
  top: 72px;
  right: 14px;
  left: 14px;
  bottom: auto;
  width: auto;
  height: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: calc(100dvh - 86px);
  padding: 22px;
  overflow-y: auto;
  overscroll-behavior: contain;
  color: var(--shell-ink);
  border: 1px solid rgba(255, 255, 255, .78);
  border-radius: 28px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .86), rgba(255, 249, 224, .7));
  box-shadow: 0 28px 80px -25px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .94);
  -webkit-backdrop-filter: blur(28px) saturate(165%);
  backdrop-filter: blur(28px) saturate(165%);
  animation: shell-menu-rise .24s var(--shell-ease);
  -webkit-overflow-scrolling: touch;
}

.mobile-menu-panel > a:not(.mobile-menu-request) {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 10px 12px;
  color: var(--shell-muted);
  border: 0;
  border-radius: 14px;
  font-size: 17px;
  font-weight: 650;
  line-height: 1.25;
  text-decoration: none;
}

.mobile-menu-panel > a:not(.mobile-menu-request):hover {
  color: var(--shell-ink);
  background: rgba(255, 255, 255, .48);
}

.mobile-menu-panel > a[aria-current="page"]:not(.mobile-menu-request) {
  color: var(--shell-ink);
  background: linear-gradient(145deg, rgba(255, 233, 111, .48), rgba(255, 205, 53, .22));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72);
  font-weight: 750;
}

.mobile-menu-panel .mobile-menu-request {
  width: 100%;
  margin-top: 10px;
  padding: 12px 20px;
  border-bottom: 1px solid rgba(255, 244, 188, .8);
  font-size: 16px;
}

@keyframes shell-menu-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes shell-menu-rise {
  from { opacity: 0; transform: translateY(-10px) scale(.985); }
  to { opacity: 1; transform: none; }
}

@media (hover: hover) and (pointer: fine) {
  .nav::before { opacity: .24; }
  .nav.nav-glow::before { opacity: .78; }
}

.glass-action {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 11px 22px;
  overflow: hidden;
  cursor: pointer;
  color: var(--shell-ink);
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: 999px;
  font-family: "Inter", "Anuphan", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 12px 30px -16px rgba(20, 18, 14, .48), inset 0 1px 0 rgba(255, 255, 255, .82), inset 0 -1px 0 rgba(91, 68, 9, .1);
  -webkit-backdrop-filter: blur(18px) saturate(155%);
  backdrop-filter: blur(18px) saturate(155%);
  transition: transform .2s var(--shell-ease), background .2s ease, border-color .2s ease, box-shadow .2s ease;
  touch-action: manipulation;
}

.glass-action::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(115deg, rgba(255, 255, 255, .36), transparent 36%, rgba(255, 255, 255, .12) 72%, transparent);
  pointer-events: none;
}

.glass-action:hover {
  border-color: rgba(255, 255, 255, .92);
  box-shadow: 0 16px 36px -16px rgba(20, 18, 14, .56), inset 0 1px 0 rgba(255, 255, 255, .94), inset 0 -1px 0 rgba(91, 68, 9, .12);
  transform: translateY(-2px);
}

.glass-action:active {
  box-shadow: 0 5px 16px -10px rgba(20, 18, 14, .52), inset 0 2px 5px rgba(19, 18, 17, .16);
  transform: translateY(1px) scale(.985);
}

.glass-action:focus-visible,
.nav-links a:focus-visible,
.nav-hamburger:focus-visible,
.mobile-menu-panel a:focus-visible {
  outline: 3px solid rgba(224, 168, 0, .86);
  outline-offset: 3px;
}

.glass-action-dark {
  color: #fff;
  border-color: rgba(255, 255, 255, .26);
  background: linear-gradient(150deg, rgba(44, 41, 37, .82), rgba(14, 13, 12, .64));
  box-shadow: 0 12px 30px -14px rgba(0, 0, 0, .64), inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 -1px 0 rgba(0, 0, 0, .28);
}

.glass-action-dark:hover {
  color: #fff;
  background: linear-gradient(150deg, rgba(55, 51, 45, .9), rgba(14, 13, 12, .76));
}

.glass-action-light {
  color: var(--shell-ink);
  background: linear-gradient(145deg, rgba(255, 255, 255, .66), rgba(255, 250, 232, .3));
}

.glass-action-light:hover {
  color: var(--shell-ink);
  background: linear-gradient(145deg, rgba(255, 255, 255, .84), rgba(255, 250, 232, .48));
}

.glass-action-yellow {
  color: var(--shell-ink);
  border-color: rgba(255, 242, 178, .8);
  background: linear-gradient(145deg, rgba(255, 230, 82, .72), rgba(255, 181, 24, .4));
  box-shadow: 0 10px 30px -13px rgba(255, 184, 20, .68), inset 0 1px 0 rgba(255, 255, 255, .84), inset 0 -1px 0 rgba(165, 102, 0, .14);
}

.glass-action-yellow:hover {
  color: var(--shell-ink);
  background: linear-gradient(145deg, rgba(255, 237, 111, .82), rgba(255, 190, 30, .52));
  box-shadow: 0 15px 36px -13px rgba(255, 184, 20, .78), inset 0 1px 0 rgba(255, 255, 255, .92), inset 0 -1px 0 rgba(165, 102, 0, .16);
}

.nav-request {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 8px 20px;
  font-size: 14px;
  white-space: nowrap;
}

.svc-tab.active {
  color: #fff7dc;
  border-color: rgba(255, 225, 116, .42);
  background: linear-gradient(145deg, rgba(255, 218, 61, .3), rgba(255, 172, 24, .13));
  box-shadow: 0 12px 30px -18px rgba(255, 190, 45, .7), inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 -1px 0 rgba(126, 73, 0, .18);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
}

.svc-tab.active::after {
  background: var(--shell-yellow);
  box-shadow: 0 0 0 4px rgba(255, 217, 61, .12);
}

@media (max-width: 900px) {
  .nav-wrap {
    top: 10px;
    padding: 0 14px;
  }

  .nav {
    min-height: 56px;
    padding: 6px 7px 6px 17px;
    gap: 16px;
  }

  .nav .brand { font-size: 18px; }
  .nav-links, .nav-request { display: none; }
  .nav-hamburger { display: flex; }
}

@media (min-width: 901px) {
  .mobile-menu { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .nav::before { opacity: 0; transition: none; }
  .nav.nav-glow::before { opacity: 0; }
  .glass-action, .nav-links a, .nav-hamburger, .ham-bar { transition: none; }
  .glass-action:hover, .glass-action:active, .nav-links a:hover { transform: none; }
  .mobile-menu, .mobile-menu-panel { animation: none; }
}

@media (prefers-reduced-transparency: reduce) {
  .nav, .mobile-menu-panel, .glass-action, .svc-tab.active {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .nav, .mobile-menu-panel { background: rgba(255, 253, 247, .98); }
  .glass-action-dark { background: #1f1d1a; }
  .glass-action-light { background: #fffdf7; border-color: rgba(19, 18, 17, .2); }
  .glass-action-yellow { background: #ffd93d; border-color: #e0a800; }
  .top-blur-scrim { display: none; }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav, .mobile-menu-panel { background: rgba(255, 253, 247, .97); }
  .glass-action-dark { background: #1f1d1a; }
  .glass-action-light { background: #fffdf7; border-color: rgba(19, 18, 17, .2); }
  .glass-action-yellow { background: #ffd93d; border-color: #e0a800; }
}

/* ------------------------------------------------------------------
   Glass work-card frames.
   Media sits inset behind a slim glass bezel. The bezel is painted with
   gradients only: a backdrop-filter per card re-blurred the page on every
   scroll frame, which made long work grids stutter. */

.work-card {
  --glass-inset: 3px;
  --glass-ring: 4px;
}

#work .work-card { --glass-radius: 28px; }
.works-grid .work-card { --glass-radius: 20px; }

.work-card:not(.work-card-info) {
  isolation: isolate;
  border: 1px solid rgba(255, 255, 255, .15);
  background: linear-gradient(150deg, rgba(255, 255, 255, .085), rgba(255, 255, 255, .02) 44%, rgba(255, 255, 255, .06));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .2),
    inset 0 -1px 0 rgba(0, 0, 0, .42),
    inset 1px 0 0 rgba(255, 255, 255, .05),
    inset -1px 0 0 rgba(255, 255, 255, .05),
    0 26px 64px -34px rgba(0, 0, 0, .82);
}

.work-card:not(.work-card-info) > img,
.work-card:not(.work-card-info) > .work-card-ph {
  position: absolute;
  inset: var(--glass-inset);
  z-index: 1;
  width: calc(100% - var(--glass-inset) * 2);
  height: calc(100% - var(--glass-inset) * 2);
  border-radius: calc(var(--glass-radius, 24px) - var(--glass-inset));
}

.work-card:not(.work-card-info) > img {
  object-fit: cover;
  object-position: center;
}

.work-card:not(.work-card-info) > .work-card-ph {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .025);
}

#work .work-overlay,
.works-grid .work-overlay {
  z-index: 2;
  inset: var(--glass-inset);
  border-radius: calc(var(--glass-radius, 24px) - var(--glass-inset));
}

#work .work-year {
  z-index: 3;
  top: calc(var(--glass-inset) + 10px);
  left: calc(var(--glass-inset) + 12px);
}

#work .work-tier-badge,
.works-grid .work-tier-badge {
  z-index: 3;
  top: calc(var(--glass-inset) + 10px);
  right: calc(var(--glass-inset) + 12px);
}

#work .work-info-bar,
.works-grid .work-info-bar {
  z-index: 3;
  left: calc(var(--glass-inset) + 10px);
  bottom: calc(var(--glass-inset) + 10px);
}

@supports ((mask-composite: exclude) or (-webkit-mask-composite: xor)) {
  .work-card:not(.work-card-info)::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: inherit;
    padding: var(--glass-inset);
    background: linear-gradient(145deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .05) 42%, rgba(255, 255, 255, .14));
    -webkit-mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    mask-composite: exclude;
    pointer-events: none;
  }

  .work-card:not(.work-card-info)::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 4;
    border-radius: inherit;
    padding: var(--glass-ring);
    background:
      radial-gradient(130% 95% at 0% 0%, rgba(255, 255, 255, .38), rgba(255, 255, 255, 0) 44%),
      radial-gradient(120% 90% at 100% 100%, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 40%),
      linear-gradient(120deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .05) 30%, rgba(255, 255, 255, 0) 52%, rgba(255, 255, 255, .14) 90%);
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, .17),
      inset 0 1px 0 rgba(255, 255, 255, .38),
      inset 0 -1px 0 rgba(255, 255, 255, .12),
      inset 1px 0 0 rgba(255, 255, 255, .08),
      inset -1px 0 0 rgba(255, 255, 255, .08);
    -webkit-mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    mask-composite: exclude;
    pointer-events: none;
  }
}

.works-grid button:hover .work-card:not(.work-card-info),
.dark-zone .work-card:not(.work-card-info):hover {
  border-color: rgba(255, 217, 61, .3);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .3),
    inset 0 -1px 0 rgba(0, 0, 0, .42),
    inset 1px 0 0 rgba(255, 255, 255, .08),
    inset -1px 0 0 rgba(255, 255, 255, .08),
    0 0 0 1px rgba(255, 217, 61, .2),
    0 24px 58px -22px rgba(255, 185, 35, .2),
    0 32px 72px -30px rgba(0, 0, 0, .88);
}

@media (prefers-reduced-transparency: reduce) {
  .work-card:not(.work-card-info)::before,
  .work-card:not(.work-card-info)::after {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .work-card:not(.work-card-info) {
    background: #1d1a15;
  }
}

/* ------------------------------------------------------------------
   Motion shell — Lenis smooth scroll + scroll progress (all pages). */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }
.lenis.lenis-smooth iframe { pointer-events: none; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }
::selection { background: #ffd93d; color: #131211; }
@media (prefers-reduced-motion: reduce) {
  }

/* ------------------------------------------------------------------
   Brand mark — the real two-line roob studio logo. */
.brand { display: inline-flex; align-items: center; line-height: 0; }
.brand-logo { display: block; height: 28px; width: auto; }
.brand-logo-light { height: 46px; filter: invert(1); }
@media (max-width: 900px) {
  .nav .brand-logo { height: 26px; }
}

/* ------------------------------------------------------------------
   Shared footer (assets/roob-footer.js). */
.sf { margin-top: 72px; padding: 72px 24px 28px; color: #fffdf7; background: #131211; font-family: "Inter", "Anuphan", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.sf-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 56px; max-width: 1080px; margin: 0 auto; }
.sf-logo { display: block; height: 46px; width: auto; filter: invert(1); }
.sf-tag { max-width: 380px; margin: 14px 0 0; color: rgba(255, 253, 247, .6); font-size: 14px; line-height: 1.6; }
.sf-col { display: flex; flex-direction: column; gap: 10px; }
.sf-h { margin-bottom: 6px; font-size: 15px; font-weight: 700; }
.sf-col a { width: fit-content; color: rgba(255, 253, 247, .65); font-size: 14.5px; text-decoration: none; transition: color .2s; }
.sf-col a:hover { color: #fffdf7; }
.sf-bottom { display: flex; flex-direction: column; gap: 6px; max-width: 1080px; margin: 56px auto 0; padding-top: 22px; border-top: 1px solid rgba(255, 253, 247, .1); color: rgba(255, 253, 247, .55); font-size: 13px; }
.sf-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; }
@media (max-width: 800px) {
  .sf-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
  .sf-grid > div:first-child { grid-column: 1 / -1; }
  .sf-row { flex-direction: column; }
}

/* ------------------------------------------------------------------
   Poster viewer (assets/roob-paper.js). */
.pv{position:fixed;inset:0;z-index:1000;cursor:zoom-out;perspective:1400px}
.pv-scrim{position:absolute;inset:0;background:rgba(10,9,8,.93)}
.pv-frame{position:absolute;transform-style:preserve-3d;perspective:2200px}
.pv-img{position:absolute;inset:0;border-radius:18px;overflow:hidden;box-shadow:0 50px 120px -40px rgba(0,0,0,.95);will-change:transform}
.pv-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.pv-hi{opacity:0;transition:opacity .35s}
.paper-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3}
.pv-hi.on{opacity:1}
.pv-meta{position:absolute;left:clamp(20px,4vw,48px);bottom:clamp(20px,4vw,44px);display:flex;flex-direction:column;gap:2px;max-width:min(300px,20vw);color:#F5F2E9;pointer-events:none;animation:pvIn .5s .35s both}
.pv-meta b{font-family:"Inter","Anuphan",sans-serif;font-size:clamp(18px,1.8vw,26px);font-weight:700;letter-spacing:-.02em;line-height:1.25}
.pv-meta small{color:rgba(245,242,233,.6);font-size:14px}
.pv-close{position:absolute;top:22px;right:24px;width:48px;height:48px;border-radius:50%;border:1px solid rgba(245,242,233,.22);background:rgba(28,26,23,.85);color:#F5F2E9;font-size:24px;line-height:1;cursor:pointer;animation:pvIn .4s .3s both}
.pv-hint{position:absolute;right:clamp(20px,4vw,48px);bottom:clamp(20px,4vw,44px);color:rgba(245,242,233,.45);font-size:12.5px;letter-spacing:.04em;pointer-events:none;animation:pvIn .5s .45s both}
@keyframes pvIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(hover:none),(max-width:800px){.pv-hint{display:none}.pv-meta{max-width:none;right:20px}}