/* Orange: the brand sheet keeps it to the beak and feet; on the website it is also
   the accent (Stephanie asked for more pop, 2026-10-14). --orange is the brand hex for
   shapes and large type; --orange-text is the darker/lighter shade that passes contrast
   for small text. */
:root{
  --bg:#F0ECE3; --surface:#FFFFFF; --ink:#1A1814; --body:#3F392F; --muted:#6A6152;
  --teal:#2A7A68; --on-teal:#F0ECE3;
  --orange:#C8641E; --orange-text:#A9501A; --orange-wash:rgba(200,100,30,0.10);
  --rule:rgba(42,122,104,0.28); --hair:rgba(42,122,104,0.14);
  --shadow:0 1px 2px rgba(26,24,20,0.05), 0 6px 20px rgba(26,24,20,0.05);
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#1A1814; --surface:#23201B; --ink:#F0ECE3; --body:#D6CFC2; --muted:#A39A8A;
    --teal:#40A890; --on-teal:#1A1814;
    --orange:#D9732B; --orange-text:#E58A45; --orange-wash:rgba(229,138,69,0.12);
    --rule:rgba(64,168,144,0.30); --hair:rgba(64,168,144,0.16);
    --shadow:none;
  }
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; scroll-padding-top:76px; }
body{
  font-family:'EB Garamond', Georgia, serif; background:var(--bg); color:var(--ink);
  font-size:21px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
a{ color:var(--teal); }
img{ display:block; max-width:100%; height:auto; }
.wrap{ width:100%; max-width:1040px; margin:0 auto; padding:0 20px; }
.spark{ color:var(--orange); }

/* top bar */
.topbar{ position:sticky; top:0; z-index:10; background:color-mix(in srgb, var(--bg) 94%, transparent);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border-bottom:1px solid var(--hair); }
.topbar::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px;
  background:linear-gradient(90deg, var(--teal), var(--orange)); opacity:.55; }
.topbar-in{ display:flex; align-items:center; justify-content:space-between; gap:16px; height:64px; }
.brand img{ width:180px; height:auto; }
.nav{ display:flex; gap:30px; }
.nav a{ font-family:'JetBrains Mono', monospace; font-size:15px; letter-spacing:0.01em;
  color:var(--muted); text-decoration:none; padding:10px 0; white-space:nowrap;
  word-spacing:-0.28em; } /* mono spaces are a full character wide: tighten inside "Your data" so the gaps between choices read as the breaks */
.nav a:hover{ color:var(--orange-text); }

/* hero */
/* Layout C (Stephanie, 2026-10-17): the penguin beside the headline, the tagline as the line above it;
   the wordmark appears only in the top bar. */
.hero{ display:grid; grid-template-columns:150px 1fr; gap:36px; align-items:center; padding-top:64px; padding-bottom:32px; }
.hero-mark{ width:150px; height:150px; padding:18px; border-radius:50%; background:var(--orange-wash); }
.eyebrow{ font-family:'JetBrains Mono', monospace; font-size:14px; font-weight:700; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--orange-text); margin-bottom:12px; }
.hero h1{ font-weight:500; font-size:clamp(2.2rem, 6.4vw, 3.3rem); line-height:1.12; max-width:18ch; letter-spacing:-0.005em; text-wrap:balance; }
.hero h1 em{ color:var(--orange); font-style:italic; }
.lede{ font-size:clamp(1.15rem, 3.6vw, 1.35rem); color:var(--body); max-width:34rem; margin-top:22px; }
@media (prefers-color-scheme: dark){ .hero-mark{ content:url(/img/pp-mark-teal-light.svg); } }
@media (max-width:760px){
  .hero{ grid-template-columns:1fr; gap:18px; text-align:center; padding-top:44px; }
  .hero-mark{ width:110px; height:110px; padding:14px; margin:0 auto; }
  .hero h1, .lede{ margin-left:auto; margin-right:auto; }
}

/* sections */
.section{ padding-top:52px; padding-bottom:16px; }
.kicker{ position:relative; font-family:'JetBrains Mono', monospace; font-size:14px; font-weight:700; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--teal); margin-bottom:20px; padding-bottom:10px; border-bottom:1px solid var(--rule); }
.kicker::before{ content:"✦"; color:var(--orange); margin-right:10px; letter-spacing:0; }
.note{ font-size:1.05rem; color:var(--muted); margin-top:18px; }

/* app cards */
.apps{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:18px; }
.app{ position:relative; background:var(--surface); border:1px solid var(--hair); border-radius:14px; padding:24px;
  box-shadow:var(--shadow); display:flex; flex-direction:column; overflow:hidden; }
.app::before{ content:""; position:absolute; left:0; right:0; top:0; height:4px; background:var(--orange); }
.app-head{ display:flex; align-items:center; gap:16px; margin-bottom:14px; }
.app-icon{ width:60px; height:60px; border-radius:14px; flex:none; }
.app h3{ font-size:1.6rem; font-weight:600; line-height:1.15; }
.app-sub{ font-family:'EB Garamond', Georgia, serif; font-style:italic; font-size:1.1rem; color:var(--orange-text); margin-top:2px; }
.app-desc{ color:var(--body); font-size:1.08rem; }
.app-actions{ display:flex; align-items:center; flex-wrap:wrap; gap:10px 18px; margin-top:auto; padding-top:20px; }
.btn{ display:inline-flex; align-items:center; min-height:48px; padding:0 20px; border-radius:6px;
  background:var(--teal); color:var(--on-teal); text-decoration:none;
  font-family:'JetBrains Mono', monospace; font-size:15px; font-weight:700; letter-spacing:0.01em; }
.btn:hover{ filter:brightness(1.08); }
.play-soon{ font-family:'JetBrains Mono', monospace; font-size:14px; color:var(--muted); }

/* data */
.data-grid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:26px; }
.data-item{ border-left:3px solid var(--orange); padding-left:16px; }
.data-item h3{ font-size:1.35rem; font-weight:600; margin-bottom:6px; }
.data-item p{ color:var(--body); font-size:1.05rem; }

/* about */
.about{ display:grid; grid-template-columns:72px 1fr; gap:24px; align-items:start; padding-bottom:56px; }
.about-mark{ width:72px; height:72px; margin-top:4px; padding:8px; border-radius:50%; background:var(--orange-wash); }
.about p{ color:var(--body); margin-bottom:12px; max-width:40rem; }
.about strong{ color:var(--ink); font-weight:600; }
@media (prefers-color-scheme: dark){ .about-mark{ content:url(/img/pp-mark-teal-light.svg); } }

/* footer */
.footer{ border-top:1px solid var(--hair); padding:22px 0 30px; }
.footer-in{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:10px 24px; }
.footer nav{ display:flex; flex-wrap:wrap; gap:4px 22px; }
.footer a, .footer p{ font-family:'JetBrains Mono', monospace; font-size:14px; color:var(--muted); letter-spacing:0.01em; }
.footer a{ text-decoration:none; border-bottom:1px solid var(--hair); padding:10px 0 1px; }
.footer a:hover{ color:var(--orange-text); border-color:var(--orange); }

/* legal pages */
.legal{ max-width:760px; padding-top:48px; padding-bottom:64px; }
.legal h1{ font-weight:500; font-size:2.4rem; line-height:1.15; margin-bottom:10px; }
.legal p{ color:var(--body); margin-bottom:14px; }
.legal h2{ font-weight:500; font-size:1.5rem; line-height:1.25; margin:40px 0 12px; color:var(--ink); }
.legal h3{ font-weight:600; font-size:1.1rem; margin:24px 0 8px; color:var(--ink); }
.legal ul{ color:var(--body); margin:0 0 16px 1.2em; }
.legal li{ margin-bottom:6px; }
.legal code{ font-family:'JetBrains Mono', monospace; font-size:.8em; background:var(--orange-wash); padding:1px 5px; border-radius:4px; overflow-wrap:anywhere; }
.legal a{ overflow-wrap:anywhere; }
.table-wrap{ overflow-x:auto; margin:8px 0 22px; }
.legal table{ width:100%; border-collapse:collapse; font-size:17px; line-height:1.4; color:var(--body); }
.legal th{ text-align:left; font-weight:600; color:var(--ink); border-bottom:2px solid var(--rule); padding:8px 10px 8px 0; }
.legal td{ vertical-align:top; border-bottom:1px solid var(--hair); padding:8px 10px 8px 0; }
.draft-flag{ font-family:'JetBrains Mono', monospace; font-size:14px; color:var(--orange-text); border:1px solid var(--orange);
  border-radius:6px; padding:12px 14px; margin:18px 0 22px; }

@media (max-width:760px){
  .apps, .data-grid{ grid-template-columns:1fr; }
  .data-grid{ gap:20px; }
}
@media (max-width:560px){
  body{ font-size:20px; }
  .brand img{ width:140px; }
  .nav{ gap:20px; }
  .nav a{ font-size:14px; }
  .hero{ padding-top:44px; }
  .app{ padding:22px 20px; }
  .about{ grid-template-columns:1fr; gap:12px; }
  .about-mark{ width:60px; height:60px; }
  .footer-in{ flex-direction:column; align-items:flex-start; }
}
@media (max-width:380px){
  .brand img{ width:124px; }
  .nav{ gap:16px; }
  .nav a{ font-size:13px; }
}