/* pipandwick.com pages (home, about, privacy). Colours are brand.css roles (brand/brand.json), which
   follow the system light/dark setting; which colour does what: apps/BRAND_ROLES.md. The play pages
   (/play/) keep their own style.css. Fraunces + Inter, self-hosted (OFL), shared with /play/. */
@font-face {
  font-family: "Fraunces";
  src: url("/play/assets/fonts/Fraunces.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/play/assets/fonts/Inter.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 17px/1.6 Inter, system-ui, -apple-system, sans-serif;
  overflow-wrap: break-word;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--primary); text-underline-offset: .15em; }
a:focus-visible, .btn:focus-visible {
  outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px;
}
h1, h2, h3 { font-family: Fraunces, Georgia, serif; font-weight: 500; line-height: 1.2; }
h1 { font-size: clamp(30px, 6vw, 44px); margin: 0 0 12px; }
h2 { font-size: clamp(25px, 4.5vw, 32px); margin: 0 0 10px; }
h3 { font-size: 21px; margin: 0 0 6px; }

.wrap {
  max-width: 1080px; margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right));
}
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 8px; z-index: 10; background: var(--focus); color: var(--on-focus); padding: 8px 14px; }

/* header + footer */
.site-head .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; padding-top: 10px; padding-bottom: 10px; }
.mark {
  font: 600 14px/1 Inter, system-ui, sans-serif; letter-spacing: .18em; text-transform: uppercase;
  color: var(--primary); text-decoration: none; padding: 14px 0; margin-right: auto;
}
.site-head nav { display: flex; gap: 4px 18px; flex-wrap: wrap; }
.site-head nav a { color: var(--ink); text-decoration: none; padding: 12px 2px; font-weight: 500; }
.site-head nav a:hover { color: var(--primary); text-decoration: underline; }

.site-foot { margin-top: 48px; border-top: 1px solid var(--line); color: var(--muted); font-size: 15px; padding: 24px 0 40px; }
.site-foot p { margin: 4px 0; }
.foot-mark { font: 500 20px/1.3 Fraunces, Georgia, serif; color: var(--ink); }
.site-foot nav { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 8px 0 12px; }
.site-foot nav a { padding: 8px 0; }

/* buttons: primary = evergreen + cream (light), cream + ink (dark); quiet = outline */
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 22px;
  border-radius: 999px; background: var(--primary); color: var(--on-primary); border: 2px solid var(--primary);
  font: 600 16px/1.1 Inter, system-ui, sans-serif; text-decoration: none;
}
.btn:hover { filter: brightness(1.08); }
.btn-quiet { background: transparent; color: var(--ink); border-color: var(--muted); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 20px 0 0; }

/* home */
.hero-art { margin: 0 auto; max-width: 1440px; }
.hero-art img { width: 100%; }
@media (min-width: 601px) { .hero-art img { border-radius: 0 0 20px 20px; } }
.hero-text { text-align: center; padding-top: 20px; }
.hero-text .actions { justify-content: center; }
.lede { font: 400 clamp(20px, 3.4vw, 26px)/1.4 Fraunces, Georgia, serif; margin: 0 auto; max-width: 34em; }

.band { padding-top: 44px; }
.band > p { max-width: 42em; }
.cards, .videos, .apps { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 16px; }
.cards.three { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 18px 20px; }
.card p { margin: 0; color: var(--ink); }

.videos { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.video { background: var(--card); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; }
.video img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.video .body { padding: 12px 16px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.video h3 { font-size: 19px; margin: 0; }
.video .kind { margin: 0; font-size: 14px; color: var(--muted); }
.video .links { margin: auto 0 0; display: flex; flex-wrap: wrap; gap: 4px 16px; }
.video .links a { padding: 8px 0; font-weight: 600; }

.play-band { text-align: left; }

.apps { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.app { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px 18px; }
.app strong { display: block; font-weight: 600; }
.app span, .app a { font-size: 15px; }
.app .soon { color: var(--muted); }

/* text pages */
.prose { max-width: 760px; }
.prose h2 { margin-top: 32px; font-size: clamp(22px, 4vw, 27px); }
.prose ul { padding-left: 1.3em; }
.prose li { margin: 4px 0; }
.meta { color: var(--muted); margin-top: -4px; }

/* click-to-play YouTube (assets/video.js): the site's own picture + a play button until tapped.
   The button sits on a photo, so it uses the fixed palette (ink disc, cream triangle). */
.yt { position: relative; display: block; }
.yt-play {
  position: absolute; left: 50%; top: 50%; width: 68px; height: 68px; margin: -34px 0 0 -34px;
  border-radius: 50%; background: color-mix(in srgb, var(--pw-ink) 82%, transparent);
  border: 2px solid var(--pw-cream); transition: transform .15s ease-out;
}
.yt-play::after {
  content: ""; position: absolute; left: 26px; top: 20px;
  border-style: solid; border-width: 13px 0 13px 21px; border-color: transparent transparent transparent var(--pw-cream);
}
.yt:hover .yt-play, .yt:focus-visible .yt-play { transform: scale(1.08); }
.yt:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; border-radius: 0; }
.yt-frame { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }
@media (prefers-reduced-motion: reduce) { .yt-play { transition: none; } }