/* Set the mood — soundtrack picker. Cut-and-pasted print labels + terminal readout. */
.mood{position:relative;max-width:1100px;margin:0 auto;padding:28px 16px 8px;text-align:center;font-family:'Hanken Grotesk',system-ui,sans-serif;color:#EDE7DC}
.mood__bar{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px 14px;margin:0 0 18px;min-height:44px}
.mood__term{position:relative;display:inline-flex;align-items:center;gap:8px;margin:0;padding:8px 16px;isolation:isolate;transform:rotate(-1.2deg);filter:drop-shadow(0 5px 8px rgba(0,0,0,.45));font:600 14px/1.2 'Hanken Grotesk',system-ui,sans-serif;letter-spacing:.01em;color:#0B0B0D;max-width:100%;white-space:nowrap}
.mood__term::before{content:"";position:absolute;inset:0;z-index:-1;background:#F7F4EC;clip-path:polygon(0 10%,98% 0,100% 94%,3% 100%)}
.mood__dot{width:8px;height:8px;border-radius:50%;background:#B9B3A8;flex:none}
.mood.is-playing .mood__dot{background:#E5484D;box-shadow:0 0 10px #E5484D;animation:mood-rec 1s steps(2) infinite}
.mood__q{margin:0 0 22px;font-family:'Bodoni Moda',serif;font-weight:500;font-size:clamp(28px,3.6vw,44px);line-height:1.12;color:#F6EFE3}
.mood__q em{display:block;font-style:italic;color:#D4AF4F}
.mood__tapes{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 12px;margin:0 auto;max-width:980px;padding:6px 0}
/* Labels: words cut from print and pasted (ransom-note). White paper, black ink, mixed type. */
/* Labels: words cut from print and pasted — 4 quick, uneven cuts each. */
.tape{--r:0deg;--q:polygon(2% 8%,99% 0,97% 100%,0 90%);position:relative;display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:11px 20px;border:0;cursor:pointer;background:none;--paper:#F7F4EC;color:#0B0B0D;isolation:isolate;font:800 17px/1 'Hanken Grotesk',system-ui,sans-serif;letter-spacing:.04em;text-transform:uppercase;transform:rotate(var(--r));filter:drop-shadow(0 6px 10px rgba(0,0,0,.55));transition:transform .18s ease,color .15s ease;-webkit-tap-highlight-color:transparent}
.tape::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--paper) url(/assets/paper/grain.webp);background-blend-mode:multiply;clip-path:var(--q);transition:background-color .15s ease}
.tape:hover{transform:rotate(0deg) translateY(-3px) scale(1.05)}
.tape:focus-visible{outline:3px solid #D4AF4F;outline-offset:6px}
.tape[aria-pressed="true"]{--paper:#0B0B0D;color:#F7F4EC;transform:rotate(0deg) translateY(-4px) scale(1.07);filter:drop-shadow(0 0 1.5px #F7F4EC) drop-shadow(0 0 1.5px #F7F4EC) drop-shadow(0 8px 14px rgba(0,0,0,.6))}
.tape[aria-pressed="true"] .tape.is-loading{animation:mood-jitter .25s steps(2) infinite}
/* each word clipped from a different publication */
.tape--punk{--r:-2.5deg;--q:polygon(0 6%,100% 0,97% 92%,4% 100%);font:400 22px/1 'Permanent Marker',cursive;letter-spacing:.02em}
.tape--retro{--r:1.5deg;--q:polygon(3% 0,98% 10%,100% 100%,0 88%);font:400 21px/1 'Monoton',cursive;text-transform:uppercase;letter-spacing:.04em}
.tape--funky{--r:-1deg;--q:polygon(0 12%,96% 0,100% 95%,5% 100%);font:400 23px/1 'Shrikhand',cursive;text-transform:none;letter-spacing:.01em}
.tape--business{--r:2deg;--q:polygon(1% 0,100% 8%,96% 100%,0 94%);font:600 17px/1 'Bodoni Moda',serif;letter-spacing:.14em}
.tape--classy{--r:-1.5deg;--q:polygon(4% 4%,100% 0,98% 100%,0 90%);font:italic 500 22px/1 'Bodoni Moda',serif;text-transform:none;letter-spacing:.01em}
.tape--chill{--r:1deg;--q:polygon(0 0,97% 9%,100% 100%,2% 92%);font:400 24px/1 'Rubik Wet Paint',cursive;text-transform:lowercase;letter-spacing:.02em;padding-bottom:16px}
.tape--spacey{--r:-3deg;--q:polygon(2% 10%,100% 0,95% 100%,0 96%);font:700 15px/1 'Orbitron',sans-serif;letter-spacing:.28em}
.mood__foot{display:flex;justify-content:center;margin-top:16px}
.mood__kill{display:none !important;font:700 14px/1 'Hanken Grotesk',system-ui,sans-serif;padding:10px 18px}
.mood.is-playing .mood__kill{display:inline-flex !important}
.mood-stage{position:relative;overflow:hidden}

/* Mini deck: follows you around the site */
.deck{position:fixed;right:16px;bottom:16px;z-index:50;display:flex;align-items:center;gap:10px;max-width:calc(100vw - 32px);padding:8px 8px 8px 12px;border-radius:12px;background:rgba(10,10,14,.92);border:1px solid rgba(212,175,79,.35);box-shadow:0 12px 30px rgba(0,0,0,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font:600 12px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em;color:#EDE7DC;transform:translateY(140%);opacity:0;transition:transform .35s ease,opacity .35s ease}
.deck.is-shown{transform:none;opacity:1}
.deck__note{color:#D4AF4F;font-size:14px;flex:none}
.deck__label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:uppercase}
.deck__label b{color:#D4AF4F;font-weight:800}
.deck button{position:relative;display:inline-grid;place-items:center;min-width:36px;height:36px;padding:0 10px;border:0;background:none;color:#0B0B0D;isolation:isolate;font:800 12px/1 ui-monospace,Menlo,monospace;letter-spacing:.06em;cursor:pointer;flex:none}
.deck button::before{content:"";position:absolute;inset:2px;z-index:-1;background:#F7F4EC;clip-path:polygon(3% 6%,100% 0,95% 96%,0 100%)}
.deck button:nth-of-type(2)::before{clip-path:polygon(0 0,97% 8%,100% 100%,4% 92%)}
.deck button:nth-of-type(3)::before{clip-path:polygon(5% 0,100% 10%,96% 100%,0 90%)}
.deck button:hover::before{background:#fff}
.deck button:focus-visible{outline:2px solid #D4AF4F;outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

@keyframes mood-blink{50%{opacity:0}}
@keyframes mood-rec{50%{opacity:.35}}
@keyframes mood-jitter{0%{transform:rotate(-1deg) translate(-1px,0)}100%{transform:rotate(1deg) translate(1px,0)}}
@media (max-width:640px){
  .tape--punk,.tape--funky,.tape--chill,.tape--classy{font-size:19px}
  .tape--retro{font-size:18px}
  .mood{padding-top:22px}
  .mood__tapes{gap:12px 10px}
  .tape{padding:10px 14px}
  .tape--spacey{letter-spacing:.2em;font-size:13px}
    .mood__hint{display:none}
  .deck{left:16px;right:16px;bottom:12px}
  .deck__label{flex:1}
}
@media (prefers-reduced-motion:reduce){
  .tape,.tape:hover,.tape[aria-pressed="true"]{transform:none}
  .tape.is-loading,.mood__cursor,.mood.is-playing .mood__dot{animation:none}
  .deck{transition:none}
}
.mood__hint{font:400 12px/1.4 'Hanken Grotesk',system-ui,sans-serif;color:rgba(207,199,186,.45);letter-spacing:.02em}

/* Home header: "No suits. Just solutions." owns the first impression; the name returns once the hero logo scrolls away. */
.brand{display:grid;align-items:center;justify-items:start}
.brand>a{grid-area:1/1;text-decoration:none;white-space:nowrap;transition:opacity .45s ease,transform .45s ease}
.brand__punk{font:italic 500 23px/1 'Bodoni Moda',serif;letter-spacing:.01em;color:#D4AF4F}
.brand__punk:hover{color:#E6C565}
.brand__name{font:600 18px/1 'Bodoni Moda',serif;letter-spacing:.22em;color:#EDE7DC;opacity:0;transform:translateY(8px);pointer-events:none}
.brand.is-past .brand__punk{opacity:0;transform:translateY(-8px);pointer-events:none}
.brand.is-past .brand__name{opacity:1;transform:none;pointer-events:auto}
@media (min-width:1150px){
  header.hdr-sticky{position:sticky !important;top:0;z-index:40 !important}
  html{scroll-padding-top:96px}
}
@media (prefers-reduced-motion:reduce){.brand>a{transition:none}}

/* Status pill doubles as a Resume button after a visit or a pause */
button.mood__term{border:0;background:none;cursor:default;-webkit-tap-highlight-color:transparent;transition:transform .16s ease}
button.mood__term:disabled{color:#0B0B0D;opacity:1}
.mood__term.is-action{cursor:pointer}
.mood__term.is-action:hover{transform:rotate(0deg) translateY(-2px) scale(1.03)}
.mood__term.is-action:focus-visible{outline:3px solid #D4AF4F;outline-offset:6px}
.mood__term.is-action .mood__dot{width:0;height:0;border-radius:0;background:none;border-style:solid;border-width:6px 0 6px 10px;border-color:transparent transparent transparent #0B0B0D}

/* Phones only: silent mode mutes the soundtrack on iPhone, so say so up front */
.mood__phone{display:none;font:500 13px/1.4 'Hanken Grotesk',system-ui,sans-serif;color:rgba(237,231,220,.68);letter-spacing:.01em;max-width:30ch}
@media (hover:none) and (pointer:coarse){
  .mood__phone{display:block}
  .mood__hint{display:none}
}