/* Shared styles for the Perch site's inner pages (privacy, releases). The landing page carries its own. */
:root{
  --desk:#BFE8FA; --paper:#FFFFFF; --fog:#F2F2F3; --ink:#0B0B0C; --graphite:#5C5C63; --body:#2B2B30; --rule:#E6E6EA;
  --deep:#1B1035; --sky:#33C7FF; --sky-shade:#1A8FE3; --lemon:#FFD60A; --lime:#2CF08A; --hot:#FF3D5A;
  --violet:#8C6BFF; --magenta:#FF4FD8; --sticky:#FFE97A;
  --display:"Bricolage Grotesque",system-ui,sans-serif; --sans:Inter,system-ui,-apple-system,sans-serif;
  --pixel:"Pixelify Sans",var(--sans);
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--desk);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img.px{image-rendering:pixelated;image-rendering:crisp-edges;display:block}

/* menu bar */
.menubar{position:sticky;top:0;z-index:50;height:40px;display:flex;justify-content:space-between;align-items:flex-start;padding:0 18px;background:rgba(255,255,255,.72);backdrop-filter:saturate(1.6) blur(14px);-webkit-backdrop-filter:saturate(1.6) blur(14px);border-bottom:1px solid rgba(11,11,12,.06)}
.menus,.status{display:flex;align-items:center;gap:22px;height:40px;flex:1;font-size:14px;font-weight:500}
.status{justify-content:flex-end;gap:16px}
.menus .app{display:flex;align-items:center;gap:7px;font-weight:700}
.menus a:hover{color:var(--sky-shade)}
.menus a.on{color:var(--sky-shade);font-weight:700}
.notch{flex:0 0 300px;height:40px;background:#000;border-radius:0 0 16px 16px;display:flex;align-items:center;justify-content:space-between;padding:0 18px 0 14px}
.wave{display:flex;gap:3px;align-items:center;height:20px}
.wave i{width:3px;border-radius:2px;background:var(--magenta);display:block;height:var(--h)}
.pill-btn{white-space:nowrap;display:inline-flex;align-items:center;padding:5px 12px;background:var(--sky);border:1px solid var(--sky-shade);border-radius:999px;font-weight:600;font-size:13px;color:var(--deep)}

/* windows */
.window{background:#fff;border:1px solid rgba(11,11,12,.18);border-radius:14px;box-shadow:0 18px 40px rgba(27,16,53,.16);overflow:hidden}
.window.bold{border:2px solid var(--ink);box-shadow:6px 6px 0 var(--deep)}
.titlebar{display:flex;align-items:center;gap:8px;padding:12px 16px;background:var(--fog);border-bottom:1px solid rgba(11,11,12,.08);font-size:13px;line-height:16px;color:var(--graphite)}
.titlebar .t{flex:1;text-align:center}
.titlebar .sp{width:52px}
.dot{width:12px;height:12px;border-radius:50%;flex:none}
.dot.r{background:#FF5F57}.dot.y{background:#FEBC2E}.dot.g{background:#28C840}

/* type */
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--sky-shade)}
.eyebrow.muted{color:var(--graphite)}
.lede{font-size:18px;line-height:28px;color:var(--graphite)}

/* pills and stickers */
.tag{display:inline-block;padding:3px 10px;border-radius:999px;background:var(--lemon);border:1.5px solid var(--ink);font-size:12px;font-weight:700;line-height:16px;color:var(--deep)}
.tag.lime{background:var(--lime);border-width:2px;letter-spacing:.04em;padding:4px 12px}
.sticker{display:inline-flex;align-items:center;padding:10px 18px;border:2px solid var(--ink);border-radius:999px;box-shadow:3px 3px 0 var(--ink);font-size:15px;font-weight:700;line-height:18px;color:var(--deep);background:#fff}
.sticker.lime{background:var(--lime)}
.btn{display:inline-flex;align-items:center;padding:13px 24px;border-radius:999px;background:var(--sky);border:1.5px solid var(--sky-shade);box-shadow:inset 0 2px 0 rgba(255,255,255,.6),0 3px 0 var(--sky-shade);font-size:16px;font-weight:700;line-height:20px;color:var(--deep);transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translateY(-1px);box-shadow:inset 0 2px 0 rgba(255,255,255,.6),0 5px 0 var(--sky-shade)}

footer{text-align:center;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 20px;padding:24px 16px 48px;font-size:13px;color:var(--graphite)}
footer a:hover{color:var(--ink)}

@media (prefers-reduced-motion:no-preference){
  .wave i{animation:wave 1.1s ease-in-out infinite;animation-delay:calc(var(--d) * -1s)}
  .bob{animation:bob 2.6s ease-in-out infinite}
}
@keyframes wave{0%,100%{transform:scaleY(.45)}50%{transform:scaleY(1)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}

@media (max-width:860px){
  .status .clock,.status svg{display:none}
  .notch{flex-basis:150px;padding:0 12px 0 10px}
  .menubar{padding:0 12px}
}
@media (max-width:520px){
  .menus{gap:14px;font-size:13px}
  .menus a.feat{display:none}
  .notch{display:none}
  .status .pill-btn{display:inline-flex}
}