:root{
  --paper:#f7d6e8;
  --ink:#120c14;
  --muted:#5a3d55;
  --rule:#2a1828;
  --verified:#1f8a62;
  --field:rgba(255,248,252,.82);
  --accent:#ff4d2e;
  --halo:#ffd84a;
  --mint:#3dffb0;
  --cyan:#3ec6ff;
  --violet:#b44cff;
  --serif:Georgia,"Palatino Linotype",Palatino,"Times New Roman",serif;
  --sans:"Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  color:var(--ink);
  font-family:var(--serif);
  font-size:18px;
  line-height:1.55;
  background-color:#f4cfe4;
  background-image:
    radial-gradient(ellipse 90% 70% at 50% 18%, #ffe27a 0%, transparent 42%),
    radial-gradient(ellipse 80% 80% at 18% 88%, #7af0ff 0%, transparent 46%),
    radial-gradient(ellipse 70% 70% at 92% 70%, #c9a0ff 0%, transparent 48%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cpath fill='none' stroke='%23120c14' stroke-opacity='.14' stroke-width='1.1' d='M2 2h18v8H10v18H2V2zm22 6h10v6h8v12H24V8zM6 30h14v12H6zM30 32h14v12H30z'/%3E%3C/svg%3E");
}
.wrap{
  max-width:840px;
  margin:0 auto;
  padding:52px 40px 120px 56px;
}
.masthead{
  display:flex;
  gap:18px;
  align-items:flex-start;
  padding:0 0 22px;
  margin:0 0 6px;
}
.bean{
  width:58px;
  height:72px;
  flex:0 0 auto;
  margin-top:2px;
  object-fit:contain;
  filter:drop-shadow(0 0 10px rgba(255,77,46,.45));
}
.bean.wide{width:124px;height:72px}
.marks{display:flex;flex-wrap:wrap;gap:18px 22px;align-items:flex-end;margin:8px 0 28px}
.mark{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  text-decoration:none;
  color:var(--ink);
  font-size:12px;
  font-style:italic;
  width:72px;
}
.mark img{width:52px;height:64px;object-fit:contain;filter:drop-shadow(0 2px 0 rgba(18,12,20,.12))}
.mark.wide{width:132px}
.mark.wide img{width:124px;height:72px}
.dl .mark-inline{
  width:44px;
  height:54px;
  flex:0 0 auto;
  object-fit:contain;
  filter:drop-shadow(0 1px 0 rgba(18,12,20,.12));
}
.dl .mark-inline.wide{width:93px}
.kicker{
  font-family:var(--serif);
  font-size:15px;
  font-style:italic;
  color:var(--muted);
}
.kicker a{color:inherit;text-decoration:none;border-bottom:1px solid var(--ink)}
h1{
  font-family:var(--serif);
  font-size:clamp(28px,5vw,42px);
  font-weight:400;
  font-style:italic;
  margin:6px 0 10px;
  line-height:1.12;
}
h2{
  font-family:var(--serif);
  font-size:22px;
  margin:32px 0 10px;
  font-weight:400;
}
.sub,.lede{color:var(--muted);max-width:54ch;margin:0;font-size:17px}
p{max-width:54ch}
a{color:var(--ink)}
.squiggle{display:block;width:148px;height:14px;margin:4px 0 16px}
nav.site{display:flex;flex-wrap:wrap;gap:12px 28px;margin:40px 0 0;font-size:16px}
nav.site a{color:var(--ink);text-decoration:none;border-bottom:1.5px solid var(--accent)}
.cards{display:grid;gap:22px;margin:10px 0 8px}
@media (min-width:720px){.cards{grid-template-columns:1fr 1fr}}
.card{
  background:var(--field);
  border:1.8px solid var(--ink);
  padding:24px 22px 28px 24px;
  box-shadow: 8px 8px 0 rgba(18,12,20,.12);
  backdrop-filter:blur(4px);
}
.card:nth-child(2){transform:rotate(.35deg);padding:26px 26px 24px 20px}
.card:nth-child(3){transform:rotate(-.25deg)}
.card h2{margin:0 0 10px;font-style:italic}
.card p{margin:0 0 16px;color:var(--muted);font-size:16px}
.card .act{font-size:16px}
.card .act a{text-decoration:none;border-bottom:1.5px solid var(--accent);padding-bottom:1px}
footer.site{
  margin-top:56px;
  color:var(--muted);
  font-size:14px;
  font-style:italic;
}
.letter p{
  font-size:19px;
  max-width:38rem;
  margin:0 0 1.15em;
}
.letter a{text-underline-offset:3px}
.sign{
  margin:52px 0 0;
  font-style:italic;
  font-size:17px;
  line-height:1.5;
  color:var(--ink);
}
.dl{list-style:none;padding:0;margin:8px 0 28px;max-width:40rem}
.dl li{
  display:flex;
  flex-wrap:wrap;
  gap:10px 18px;
  justify-content:space-between;
  align-items:center;
  border:1.8px solid var(--ink);
  background:var(--field);
  padding:14px 16px 16px;
  margin:0 0 12px;
}
.dl .who{display:flex;gap:12px;align-items:center;min-width:0;flex:1}
.dl li.locked{opacity:.92}
.dl span{display:block;color:var(--muted);font-size:15px;margin-top:4px}
.dl-acts{display:flex;flex-wrap:wrap;gap:12px 16px}
.pay.locked{pointer-events:none;opacity:.45}
.kit .cart-toggle{
  font:inherit;
  font-size:16px;
  cursor:pointer;
  color:var(--ink);
  background:transparent;
  border:none;
  border-bottom:1.5px solid var(--accent);
  padding:0 0 1px;
}
.kit li.in-cart{box-shadow: 6px 6px 0 rgba(255,77,46,.22)}
.kit .cart-toggle[aria-pressed="true"]{border-bottom-color:var(--violet)}
.cart{
  border:1.8px solid var(--ink);
  background:var(--field);
  padding:18px 18px 22px;
  margin:8px 0 28px;
  max-width:40rem;
  box-shadow: 8px 8px 0 rgba(180,76,255,.18);
  transform:rotate(-.25deg);
}
.cart h2{margin:0 0 10px}
.cart-lines{list-style:none;padding:0;margin:0 0 12px}
.cart-lines li{
  display:flex;
  justify-content:space-between;
  gap:12px;
  font-size:16px;
  padding:4px 0;
  border:0;
  background:none;
  box-shadow:none;
}
.cart-total{
  font-size:22px;
  font-style:italic;
  margin:0 0 8px !important;
}
.cart-note{font-size:15px;color:var(--muted);margin:0 0 14px !important}
.cart-pay{
  display:inline-block;
  text-decoration:none;
  border:1.8px solid var(--ink);
  padding:6px 14px 7px;
  background:#fff8fc;
  box-shadow: 4px 4px 0 rgba(18,12,20,.16);
}
.cart-pay.locked{pointer-events:none;opacity:.45}
.stripe-mark{
  display:block;
  margin:12px 0 0;
  font-size:14px;
  font-style:italic;
  color:var(--muted);
}
.stripe-mark a{color:inherit}

/* Ad slot — empty on purpose. Do not load a network ad script until
   /privacy is updated in the same change. See AGENTS.md.
   .ad-slot{ min-height:0; } */
.prose ul{padding-left:22px}
.prose li{margin:8px 0}
.prose table{border-collapse:collapse;font-size:15px;margin:18px 0;font-family:var(--sans);background:var(--field)}
.prose th,.prose td{border:1px solid var(--ink);padding:8px 12px;text-align:left;vertical-align:top}
.prose code{font-family:var(--mono);font-size:13px}
.app-frame{
  border:1.8px solid var(--ink);
  background:var(--field);
  margin:22px 0 28px;
  max-width:54ch;
  box-shadow: 8px 8px 0 rgba(180,76,255,.18);
}
.app-bar{
  border-bottom:1.8px solid var(--ink);
  padding:9px 14px;
  font-family:var(--sans);
  font-size:13px;
  background:linear-gradient(90deg,#ff4d2e,#ffd84a,#3dffb0,#3ec6ff,#b44cff);
  color:#120c14;
}
.app-body{padding:16px 14px 20px 16px;font-size:15px;color:var(--muted)}
@media (max-width:640px){
  .wrap{padding:28px 16px 80px 20px}
}