/* Popinn: warm koraal met browservoorbeeld uit de vorige site.
   --brand-text is het koraal dat op deze achtergrond leesbaar blijft als kleine tekst. */
:root { --brand: #e85d3a; --brand-text: #b83f1c; --brand-soft: #fff4ec; --brand-ink: #5b1f0d; }
body { background: #fff4ec; }
.p-kind, .p-link, .p-deck em { color: var(--brand-text); }
.p-name em { color: var(--brand); }
.browser { background: var(--brand-soft); border: 1.5px solid var(--brand-ink); border-radius: 4px; overflow: hidden; box-shadow: 8px 8px 0 var(--brand-ink); transition: transform .3s ease, box-shadow .3s ease; }
.browser:hover { transform: translate(-3px, -3px); box-shadow: 12px 12px 0 var(--brand-ink); }
.browser-bar { display: flex; align-items: center; gap: 7px; padding: 10px 14px; background: var(--brand-ink); color: var(--brand-soft); font-family: var(--mono); font-size: 11px; }
.browser-bar > span:not(.url) { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.4); }
.browser-bar .url { margin-left: 14px; letter-spacing: .04em; }
.pop-body { padding: clamp(20px, 3vw, 32px); min-height: 380px; color: var(--brand-ink); background: radial-gradient(circle at 85% -10%, rgba(232,93,58,.22), transparent 55%), var(--brand-soft); }
.pop-eye { font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--brand-text); margin-bottom: 14px; }
.pop-h1 { font-family: var(--serif); font-size: clamp(48px, 6vw, 88px); line-height: .95; letter-spacing: -.025em; margin-bottom: 28px; }
.pop-h1 em { font-style: italic; color: var(--brand); }
.pop-search { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; background: rgba(255,255,255,.7); border: 1px solid rgba(91,31,13,.15); border-radius: 22px; padding: 6px; margin-bottom: 36px; width: fit-content; max-width: 100%; }
.ps-pill { font-family: var(--mono); font-size: 10px; letter-spacing: .06em; background: #ffffff; padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(91,31,13,.1); }
.ps-go { width: 32px; height: 32px; background: var(--brand-text); color: #ffffff; border-radius: 50%; display: grid; place-items: center; font-size: 16px; }
.pop-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.pop-card { background: #ffffff; border: 1px solid rgba(91,31,13,.12); border-radius: 8px; padding: 8px; font-size: 12px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pc-img { aspect-ratio: 4 / 3; border-radius: 4px; position: relative; overflow: hidden; }
.pc-img.v1 { background: linear-gradient(135deg, #ffd1bd 0%, #ffaa85 60%, #e85d3a 100%); }
.pc-img.v2 { background: linear-gradient(135deg, #fdba74 0%, #fb923c 60%, #c2410c 100%); }
.pc-img.v3 { background: linear-gradient(135deg, #fde68a 0%, #f59e0b 60%, #92400e 100%); }
.pc-img::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 70% 30%, rgba(255,255,255,.4), transparent 50%); }
.pc-name { font-size: 11px; line-height: 1.3; }
.pc-name em { font-family: var(--serif); font-style: italic; font-size: 13px; }
@media (max-width: 480px) {
  .pop-body { min-height: 0; }
  .ps-pill { padding: 8px 8px; }
  .ps-go { width: 28px; height: 28px; }
}