/* Layout: hard-cut grounds like an edit, with a scroll-driven timeline in the chrome.
   Shared by the landing page and the All work page. Single look by choice. */
:root {
  color-scheme: dark;
  --key:    #1436FF;   /* chroma-key blue, the studio ground */
  --bone:   #E6E7EB;   /* cool paper, never cream */
  --ink:    #0C0E13;
  --head:   #FFD60A;   /* playhead yellow, the one accent */
  --rec:    #FF4433;   /* record light, tiny doses only */
  --paper-ink: #12141A;
  --soft-on-dark: #A9AEBD;

  --sc-canvas: var(--ink); --sc-surface: #161922;
  --sc-ink: #F4F5F8; --sc-ink-soft: var(--soft-on-dark);
  --sc-accent: var(--head); --sc-accent-ink: var(--ink);

  --f-display: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
  --f-text: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --sc-font-display: var(--f-display); --sc-font-text: var(--f-text); --sc-font-mono: var(--f-mono);

  --bar-h: 56px;
  --tl-h: 64px;
  --gutter-l: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));
}
html, body { background: var(--ink); color: #F4F5F8; }
body { font-family: var(--f-text); font-size: 1rem; line-height: 1.55; overflow-x: clip; margin: 0; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 60; background: var(--ink); }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--head); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--f-display); font-weight: 900; line-height: .9; letter-spacing: -.01em; text-transform: uppercase; text-wrap: balance; margin: 0; }
p { margin: 0; }
.mono { font-family: var(--f-mono); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; }

/* ---------- loud bar ---------- */
.bar {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50;
  height: var(--bar-h); display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 16px;
  padding-left: var(--gutter-l); padding-right: var(--gutter-r);
  background: var(--ink); border-bottom: 2px solid var(--head);
}
.wordmark { font-family: var(--f-display); font-weight: 900; font-size: 1.7rem; letter-spacing: .02em; text-decoration: none; text-transform: uppercase; display: flex; align-items: center; gap: 8px; }
.wordmark i { width: 10px; height: 10px; border-radius: 50%; background: var(--rec); display: inline-block; }
.marquee { overflow: hidden; white-space: nowrap; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); min-width: 0; }
.marquee span { display: inline-block; padding-left: 100%; animation: marq 38s linear infinite; font-family: var(--f-mono); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--soft-on-dark); }
@keyframes marq { to { transform: translateX(-100%); } }
.navlink { font-family: var(--f-display); font-weight: 700; font-size: 1.1rem; text-transform: uppercase; letter-spacing: .03em; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; padding: 0 12px; }
.navlink:hover { color: var(--head); }
.btn {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 18px;
  font-family: var(--f-display); font-weight: 900; font-size: 1.15rem; letter-spacing: .03em; text-transform: uppercase;
  text-decoration: none; border: 2px solid currentColor; background: transparent; color: inherit; cursor: pointer;
  transition: transform .18s var(--sc-ease-out, ease), background-color .18s, color .18s;
}
.btn:hover { transform: translateY(-2px); }
.btn--head { background: var(--head); color: var(--ink); border-color: var(--head); }
.btn--ink { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn svg { width: 20px; height: 20px; flex: none; }
.bar .btn { font-size: 1.05rem; min-height: 40px; }

/* ---------- sections, the cuts ---------- */
.cut { position: relative; display: grid; align-content: center; padding-block: 84px; padding-left: var(--gutter-l); padding-right: var(--gutter-r); overflow: hidden; }
.cut > .in { width: 100%; max-width: 1240px; margin: 0 auto; min-width: 0; }
.g-key  { background: var(--key); color: #fff; }
.g-bone { background: var(--bone); color: var(--paper-ink); }
.g-ink  { background: var(--ink); color: #F4F5F8; }
.g-head { background: var(--head); color: var(--ink); }
.slate { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-bottom: 22px; opacity: .85; }
.slate b { font-weight: 600; }
.sec-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 18px; margin-bottom: 40px; }
.sec-head h2 { font-size: clamp(3rem, 7vw, 6.5rem); }
.sec-head p { max-width: 44ch; font-size: 1.05rem; }

/* ---------- hero ---------- */
.hero { min-height: calc(92svh - var(--bar-h)); padding-block: 56px 104px; }
.hero .p-back { position: absolute; inset: -4%; pointer-events: none;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.07) 0 1px, transparent 1px 8.33%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 12.5%);
  transform: translate3d(calc(var(--mx,0) * -10px), calc(var(--my,0) * -8px), 0); transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.hero .ghost { position: absolute; right: -2vw; bottom: 3vh; font-family: var(--f-display); font-weight: 900; font-size: clamp(5rem, 17vw, 18rem); line-height: .8; color: rgba(255,255,255,.08); white-space: nowrap; pointer-events: none;
  transform: translate3d(calc(var(--mx,0) * -18px), calc(var(--my,0) * -10px), 0); transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.finder { position: absolute; inset: 18px; pointer-events: none; z-index: 4;
  transform: translate3d(calc(var(--mx,0) * 26px), calc(var(--my,0) * 18px), 0); transition: transform .45s cubic-bezier(.2,.7,.2,1); }
.finder i { position: absolute; width: 34px; height: 34px; border: 0 solid rgba(255,255,255,.85); }
.finder i:nth-child(1) { top: 0; left: 0; border-width: 3px 0 0 3px; }
.finder i:nth-child(2) { top: 0; right: 0; border-width: 3px 3px 0 0; }
.finder i:nth-child(3) { bottom: 0; left: 0; border-width: 0 0 3px 3px; }
.finder i:nth-child(4) { bottom: 0; right: 0; border-width: 0 3px 3px 0; }
.hero-grid { position: relative; z-index: 3; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 48px; align-items: center; }
.hero h1 { font-size: clamp(3.4rem, 8.6vw, 8.6rem); }
.hero h1 .hl { color: var(--head); }
.hero .lede { margin-top: 26px; max-width: 46ch; font-size: 1.12rem; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.monitor { margin: 0; transform: translate3d(calc(var(--mx,0) * 14px), calc(var(--my,0) * 10px), 0) rotate(-2deg); transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.monitor .scr { position: relative; aspect-ratio: 16/9; max-width: 100%; background: #000; border: 2px solid #fff; box-shadow: 18px 22px 0 rgba(12,14,19,.55); overflow: hidden; }
.monitor video, .monitor img { display: block; width: 100%; height: 100%; object-fit: cover; }
.monitor .hud { position: absolute; inset: 8px; pointer-events: none; display: flex; justify-content: space-between; align-items: flex-start; font-family: var(--f-mono); font-size: .75rem; letter-spacing: .1em; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.8); }
.monitor figcaption { margin-top: 16px; display: grid; gap: 4px; }
.monitor figcaption b { font-family: var(--f-display); font-weight: 700; font-size: 1.5rem; text-transform: uppercase; line-height: 1; }
.rec { display: inline-flex; align-items: center; gap: 6px; }
.rec::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--rec); animation: blink 1.2s steps(2) infinite; }
@keyframes blink { 50% { opacity: .2; } }

/* ---------- clips ---------- */
.clip { position: relative; aspect-ratio: 16/9; max-width: 100%; background: #000; overflow: hidden; }
.g-bone .clip { box-shadow: 12px 12px 0 var(--key); }
.g-ink .clip { box-shadow: 12px 12px 0 var(--head); }
.g-key .clip { box-shadow: 12px 12px 0 rgba(12,14,19,.55); }
.clip video, .clip img { display: block; width: 100%; height: 100%; object-fit: cover; }
.clip .tc { position: absolute; left: 10px; bottom: 10px; font-family: var(--f-mono); font-size: .75rem; letter-spacing: .08em; background: rgba(0,0,0,.7); color: #fff; padding: 5px 9px; }
.play-toggle { position: absolute; right: 10px; bottom: 10px; width: 44px; height: 44px; border: 0; background: rgba(0,0,0,.65); color: #fff; cursor: pointer; display: grid; place-items: center; }
.play-toggle svg { width: 18px; height: 18px; }
.link { font-family: var(--f-display); font-weight: 700; font-size: 1.2rem; letter-spacing: .03em; text-transform: uppercase; text-underline-offset: 6px; text-decoration-thickness: 2px; display: inline-flex; min-height: 44px; align-items: center; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tags span { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; border: 1.5px solid currentColor; padding: 5px 9px; }
.pending { aspect-ratio: 16/9; max-width: 100%; display: grid; place-items: center; text-align: center; border: 2px dashed currentColor; padding: 12px;
  background: repeating-linear-gradient(135deg, transparent 0 18px, color-mix(in oklab, currentColor 7%, transparent) 18px 19px); }
.pending span { font-family: var(--f-mono); font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; }

/* ---------- services ---------- */
.svc-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.svc h3 { font-size: clamp(2.8rem, 4.6vw, 4.4rem); margin-bottom: 14px; }
.svc:nth-child(1) h3 { color: var(--key); }
.svc:nth-child(3) h3 { color: var(--key); }
.svc ul { list-style: none; margin: 0; padding: 0; border-top: 2px solid currentColor; }
.svc li { padding: 12px 0; border-bottom: 1.5px solid color-mix(in oklab, currentColor 30%, transparent); display: grid; gap: 2px; }
.svc li b { font-family: var(--f-display); font-weight: 700; font-size: 1.3rem; text-transform: uppercase; letter-spacing: .02em; line-height: 1; }
.svc li span { font-size: .92rem; opacity: .85; }

/* ---------- tools ---------- */
.tool-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.tool { display: grid; gap: 16px; align-content: start; min-width: 0; }
.tool h3 { font-size: clamp(2.4rem, 3.6vw, 3.4rem); }
.tool p { font-size: .98rem; }
.tool .does { color: var(--head); }

/* ---------- web work ---------- */
.feature { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 44px; align-items: center; }
.feature h2 { font-size: clamp(2.8rem, 5.6vw, 5.4rem); margin-bottom: 18px; }
.feature p { max-width: 42ch; margin-bottom: 20px; }

/* ---------- words (placeholder) ---------- */
.words .row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.quote-slot { min-height: 150px; border: 2px dashed color-mix(in oklab, currentColor 45%, transparent); display: grid; align-content: space-between; padding: 20px; }
.quote-slot .qm { font-family: var(--f-display); font-weight: 900; font-size: 4rem; line-height: .6; opacity: .25; }

/* ---------- close ---------- */
.close { padding-block: 84px calc(var(--tl-h) + 40px); }
.close h2 { font-size: clamp(3.4rem, 9vw, 9.5rem); max-width: 13ch; }
.close .lede { margin-top: 22px; max-width: 44ch; font-size: 1.15rem; }
.close .btn--wa { font-size: clamp(1.3rem, 2.4vw, 1.8rem); min-height: 64px; padding: 0 26px; }
.reveal-box { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font-family: var(--f-mono); font-size: .95rem; }
.reveal-box output { user-select: all; font-weight: 600; }
.copy-btn { min-height: 40px; padding: 0 14px; border: 2px solid var(--ink); background: transparent; font: inherit; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; cursor: pointer; color: var(--ink); display: inline-flex; align-items: center; text-decoration: none; }
.foot { margin-top: 56px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; border-top: 2px solid var(--ink); padding-top: 16px; }

/* ---------- All work page ---------- */
.work-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px 36px; }
.work-item { display: grid; gap: 14px; align-content: start; min-width: 0; }
.work-item h3 { font-size: clamp(2rem, 3.2vw, 3rem); }
.work-item p { max-width: 48ch; }

/* ---------- the timeline (signature) ---------- */
.tl {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
  padding: 8px var(--gutter-r) calc(8px + env(safe-area-inset-bottom, 0px)) var(--gutter-l);
  background: rgba(12,14,19,.94); border-top: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center;
}
.tl .tcode { font-family: var(--f-mono); font-size: .8rem; font-weight: 600; color: var(--head); font-variant-numeric: tabular-nums; min-width: 11ch; }
.tl .tcode small { display: block; font-size: .7rem; font-weight: 400; color: var(--soft-on-dark); letter-spacing: .1em; text-transform: uppercase; }
.tracks { position: relative; display: grid; gap: 3px; }
.track { display: flex; gap: 2px; height: 24px; }
.track.a1 { height: 12px; }
.tclip { position: relative; flex: var(--w, 1) 1 0; min-width: 0; border: 0; padding: 0 8px; cursor: pointer; overflow: hidden; text-align: left;
  font-family: var(--f-mono); font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; text-overflow: ellipsis; color: #fff;
  background: var(--c, #2a2f3d); opacity: .8; transition: opacity .2s; }
.tclip:hover, .tclip.on { opacity: 1; }
.tclip.c-key { --c: var(--key); } .tclip.c-bone { --c: #8D919C; color: var(--ink); } .tclip.c-ink { --c: #2B303C; } .tclip.c-head { --c: var(--head); color: var(--ink); }
.wave { display: block; width: 100%; height: 12px; }
.playhead { position: absolute; top: -6px; bottom: -4px; width: 2px; background: var(--head); left: 0; pointer-events: none; will-change: transform; }
.playhead::before { content: ""; position: absolute; top: 0; left: -5px; border: 6px solid transparent; border-top: 8px solid var(--head); }

@media (max-width: 1020px) {
  .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 28px; }
  .tool-grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .tool { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 16px 28px; }
  .tool > .clip, .tool > .pending { grid-row: span 4; }
}
@media (max-width: 860px) {
  :root { --bar-h: 52px; --tl-h: 52px; }
  .marquee { display: none; }
  .bar { grid-template-columns: 1fr auto auto; gap: 10px; }
  .wordmark { font-size: 1.45rem; }
  .cut { padding-block: 60px; }
  .hero { min-height: auto; padding-block: 40px 72px; }
  .hero-grid, .feature, .work-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .hero h1 { font-size: clamp(3.2rem, 15vw, 5.6rem); }
  .tool { grid-template-columns: minmax(0, 1fr); }
  .tool > .clip, .tool > .pending { grid-row: auto; }
  .words .row { grid-template-columns: minmax(0, 1fr); }
  .quote-slot { min-height: 110px; }
  .track { height: 16px; }
  .tclip { font-size: 0; padding: 0; }
  .track.a1 { display: none; }
  .tl .tcode { min-width: 9ch; font-size: .72rem; }
}
@media (max-width: 520px) {
  .svc-grid { grid-template-columns: minmax(0, 1fr); }
  .bar .navlink { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .marquee span { animation: none; padding-left: 0; }
  .hero .p-back, .finder, .hero .ghost { transition: none; transform: none !important; }
  .monitor { transition: none; transform: rotate(-2deg) !important; }
  .rec::before { animation: none; }
  .btn { transition: none; }
}

/* ---------- views badge on the hero monitor ---------- */
.monitor .scr { overflow: visible; }
.monitor .scr > video { position: relative; }
.views-badge { position: absolute; z-index: 5; right: -22px; top: -46px; transform: rotate(5deg);
  background: var(--head); color: var(--ink); padding: 12px 18px 10px; box-shadow: 8px 8px 0 var(--ink);
  display: grid; gap: 2px; text-align: left; }
.views-badge b { font-family: var(--f-display); font-weight: 900; font-size: clamp(2.6rem, 4.6vw, 4.4rem); line-height: .85; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.views-badge span { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; }
.views-badge.pop { animation: badge-pop .5s cubic-bezier(.2,1.6,.4,1) both; }
@keyframes badge-pop { from { transform: rotate(5deg) scale(.6); } to { transform: rotate(5deg) scale(1); } }

/* ---------- floating WhatsApp ---------- */
.fab { position: fixed; z-index: 58; right: calc(var(--gutter-r) + 4px); bottom: calc(var(--tl-h) + 18px + env(safe-area-inset-bottom, 0px));
  display: inline-flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 20px 0 16px; border-radius: 999px;
  background: #25D366; color: #08140C; text-decoration: none; font-family: var(--f-display); font-weight: 900; font-size: 1.2rem; text-transform: uppercase; letter-spacing: .03em;
  box-shadow: 0 10px 24px -8px rgba(0,0,0,.55), 0 0 0 3px var(--ink); transition: transform .2s; }
.fab:hover { transform: translateY(-3px); }
.fab svg { width: 26px; height: 26px; flex: none; }
.fab::after { content: ""; position: absolute; inset: -3px; border-radius: inherit; border: 3px solid #25D366; opacity: 0; animation: fab-ring 2.8s ease-out infinite; pointer-events: none; }
@keyframes fab-ring { 0% { opacity: .7; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(1.35); } }

/* ---------- Hook, the studio ghost ---------- */
.ghost-pal { position: fixed; z-index: 57; left: 0; top: 0; width: 110px; height: 128px; pointer-events: auto; cursor: pointer;
  will-change: transform; transform-origin: 50% 60%; -webkit-tap-highlight-color: transparent; }
.ghost-pal svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 14px 14px rgba(12,14,19,.35)); }
.ghost-pal .bob { animation: ghost-bob 2.6s ease-in-out infinite; transform-origin: 50% 50%; }
@keyframes ghost-bob { 50% { transform: translateY(-10px) rotate(-4deg); } }
.ghost-pal .lid { transform: scaleY(0); transform-origin: center; transform-box: fill-box; animation: ghost-blink 4.2s infinite; }
@keyframes ghost-blink { 0%, 93%, 100% { transform: scaleY(0); } 96% { transform: scaleY(1); } }
.ghost-pal .bubble { position: absolute; right: 86%; bottom: 82%; width: max-content; max-width: 210px; padding: 10px 14px; background: #fff; color: var(--ink);
  font-family: var(--f-display); font-weight: 700; font-size: 1.15rem; line-height: 1.05; text-transform: uppercase; letter-spacing: .02em;
  border: 2px solid var(--ink); box-shadow: 5px 5px 0 var(--ink); opacity: 0; transform: translateY(6px) scale(.9); transform-origin: 100% 100%;
  transition: opacity .25s, transform .25s; pointer-events: none; }
.ghost-pal.talk .bubble { opacity: 1; transform: none; }
.ghost-pal.spooked .bob { animation: ghost-spook .6s ease-in-out; }
@keyframes ghost-spook { 30% { transform: scale(1.18) rotate(8deg); } 60% { transform: scale(.92) rotate(-6deg); } }
/* Moods: one mouth shows at a time, brows and lids follow. */
.ghost-pal .mouth { display: none; }
.ghost-pal[data-mood="grin"] .m-grin, .ghost-pal[data-mood="wink"] .m-grin, .ghost-pal[data-mood="o"] .m-o,
.ghost-pal[data-mood="yawn"] .m-yawn, .ghost-pal[data-mood="flat"] .m-flat { display: inline; }
.ghost-pal .brow { transform-box: fill-box; transform-origin: center; transition: transform .25s; }
.ghost-pal[data-mood="grin"] .brow.l { transform: translateY(-3px) rotate(-8deg); }
.ghost-pal[data-mood="o"] .brow { transform: translateY(-7px); }
.ghost-pal[data-mood="flat"] .brow, .ghost-pal[data-mood="yawn"] .brow { transform: translateY(3px); }
.ghost-pal[data-mood="wink"] .brow.l { transform: translateY(4px) rotate(10deg); }
.ghost-pal[data-mood="wink"] .lid.l { animation: none; transform: scaleY(1); }
.ghost-pal[data-mood="flat"] .lid, .ghost-pal[data-mood="yawn"] .lid { animation: none; transform-origin: top; transform: scaleY(.55); }
/* The clapperboard only comes out for a Boo. */
.ghost-pal .clap { opacity: 0; transform-box: fill-box; transform-origin: 0 100%; }
.ghost-pal .arm { transform-box: fill-box; transform-origin: 0 100%; transform: rotate(-30deg); }
.ghost-pal.spooked .clap { animation: clap-show 1.1s ease-out; }
.ghost-pal.spooked .arm { animation: clap-snap 1.1s ease-out; }
@keyframes clap-show { 0% { opacity: 0; transform: scale(.4) rotate(-20deg); } 18%, 82% { opacity: 1; transform: none; } 100% { opacity: 0; transform: scale(.8); } }
@keyframes clap-snap { 0%, 38% { transform: rotate(-30deg); } 48% { transform: rotate(0); } 60% { transform: rotate(-10deg); } 70%, 100% { transform: rotate(0); } }
/* Left alone, it fades see-through; any movement brings it back. */
.ghost-pal svg { transition: opacity 1.2s ease; }
.ghost-pal.idle svg { opacity: .32; }
.wisp { position: fixed; z-index: 56; border-radius: 50%; background: rgba(244,245,248,.75); filter: blur(5px); pointer-events: none;
  animation: wisp .8s ease-out forwards; }
@keyframes wisp { from { opacity: .7; transform: none; } to { opacity: 0; transform: translateY(var(--dy)) scale(1.7); } }

@media (max-width: 860px) {
  .views-badge { right: 8px; top: -34px; padding: 9px 13px 8px; }
  .fab { min-height: 52px; padding: 0 16px 0 13px; font-size: 1.05rem; }
  .ghost-pal { width: 84px; height: 98px; }
  .ghost-pal .bubble { font-size: 1rem; max-width: 170px; }
}
@media (prefers-reduced-motion: reduce) {
  .fab::after, .ghost-pal .bob, .ghost-pal .lid, .ghost-pal .clap, .ghost-pal .arm, .views-badge.pop { animation: none; }
  .fab, .ghost-pal .bubble, .ghost-pal svg, .ghost-pal .brow { transition: none; }
}
.ghost-pal.perched .bubble { font-size: 1.6rem; max-width: 300px; padding: 12px 18px; }
@media (max-width: 860px) {
  .ghost-pal:not(.perched) .bubble { right: 10%; bottom: auto; top: 100%; transform-origin: 100% 0; }
  .ghost-pal.perched .bubble { font-size: 1.45rem; max-width: 240px; }
}