/* Wholefelt, the public page at maximilianrupp.com/projects/wholefelt. Static, no script. */
:root{
  --bg:#ffffff; --ink:#141414; --muted:#5c5c5c; --line:#e8e4de; --soft:#faf7f2;
  --glow:#f2a65a; --glow-soft:rgba(242,166,90,.18);
  --maxw:680px;
}
*{ box-sizing:border-box; }
html,body{ margin:0; }
body{ background:var(--bg); color:var(--ink); font-family:ui-rounded,"SF Pro Rounded",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 20px; }
a{ color:var(--ink); }
.top{ display:flex; justify-content:space-between; align-items:center; padding:22px 0; }
.brand{ font-weight:750; letter-spacing:.01em; display:flex; align-items:center; gap:10px; }
.brand i{ width:14px; height:14px; border-radius:50%; background:var(--glow); box-shadow:0 0 0 5px var(--glow-soft); }
.langs a{ text-decoration:none; color:var(--muted); font-size:.9rem; margin-left:10px; }
.langs a[aria-current]{ color:var(--ink); font-weight:700; }

.hero{ text-align:center; padding:36px 0 30px; }
.breath{ width:120px; height:120px; margin:0 auto 26px; border-radius:50%;
  background:radial-gradient(circle, rgba(242,166,90,.75), rgba(242,166,90,.10) 70%);
  animation:breathe 9s ease-in-out infinite; }
@keyframes breathe{ 0%,100%{ transform:scale(.74); opacity:.65 } 45%{ transform:scale(1.06); opacity:1 } }
@media (prefers-reduced-motion: reduce){ .breath{ animation:none; } }
.kicker{ color:var(--muted); font-size:.95rem; }
h1{ font-size:2.3rem; line-height:1.15; margin:8px 0 14px; font-weight:780; }
.sub{ color:var(--muted); font-size:1.08rem; max-width:34em; margin:0 auto; }

section{ padding:26px 0; border-top:1px solid var(--line); }
h2{ font-size:1.3rem; margin:0 0 12px; font-weight:750; }
ol.steps{ list-style:none; padding:0; margin:0; counter-reset:s; }
ol.steps li{ counter-increment:s; display:grid; grid-template-columns:38px 1fr; gap:12px; padding:10px 0; }
ol.steps li::before{ content:counter(s); width:30px; height:30px; border-radius:50%; background:var(--soft);
  border:1px solid var(--line); display:grid; place-items:center; font-weight:700; font-size:.9rem; }
ol.steps b{ display:block; }
ol.steps span{ color:var(--muted); }
.note{ background:var(--soft); border:1px solid var(--line); border-radius:14px; padding:16px 18px; }
.btn{ display:inline-block; margin-top:6px; padding:12px 20px; border-radius:999px; background:var(--ink); color:#fff;
  text-decoration:none; font-weight:650; }
.fine{ color:var(--muted); font-size:.9rem; }
footer{ padding:26px 0 46px; border-top:1px solid var(--line); color:var(--muted); font-size:.88rem; }
@media (max-width:520px){ h1{ font-size:1.9rem; } body{ font-size:16px; } }
.note p{ margin:0 0 10px; }

/* ---------- the app ---------- */
.app .wrap{ padding-bottom:40px; }
.app .brand{ text-decoration:none; color:var(--ink); }
.card{ display:flex; align-items:center; gap:14px; padding:18px; margin:8px 0 14px; cursor:pointer; border-radius:18px;
  background:linear-gradient(180deg, rgba(242,166,90,.16), rgba(242,166,90,.05)); border:1px solid rgba(242,166,90,.35); }
.card.done{ background:var(--soft); border-color:var(--line); cursor:default; }
.card .ico{ width:46px; height:46px; flex:none; border-radius:50%; display:grid; place-items:center; font-size:1.35rem; background:#fff; border:1px solid var(--line); }
.card .cx{ flex:1; min-width:0; display:flex; flex-direction:column; }
.card .cx span{ color:var(--muted); font-size:.92rem; }
.card .go{ font-size:1.3rem; font-weight:750; }
.panel{ border-top:1px solid var(--line); padding:18px 0; }
.panel.note{ border:1px solid var(--line); border-radius:14px; padding:16px 18px; margin:6px 0 14px; background:var(--soft); }
.ph{ display:flex; justify-content:space-between; align-items:baseline; }
.ph span{ color:var(--muted); font-size:.85rem; }
.panel h2{ font-size:1.05rem; }
.line{ padding:10px 0; border-top:1px solid var(--line); }
.line:first-child{ border-top:0; }
.line b{ display:block; }
.line span{ display:block; color:var(--muted); }
.hist{ list-style:none; margin:0; padding:0; }
.hist li{ display:grid; grid-template-columns:1fr auto; gap:2px 12px; padding:9px 0; border-top:1px solid var(--line); font-size:.95rem; }
.hist li:first-child{ border-top:0; }
.hist .d{ color:var(--muted); }
.hist .e{ color:var(--glow); letter-spacing:2px; text-align:right; }
.hist .e i{ font-style:normal; color:var(--line); }
.hist .x{ grid-column:1 / -1; }
.hist .none{ display:block; color:var(--muted); }
.btn.wide{ width:100%; text-align:center; margin-top:14px; border:0; font:inherit; cursor:pointer; }
button.btn{ border:0; font:inherit; cursor:pointer; margin:4px 4px 4px 0; }
.btn.ghost{ background:#fff; color:var(--ink); border:1px solid var(--line); }
.btn[disabled]{ opacity:.4; cursor:default; }
.link{ background:none; border:0; padding:0; font:inherit; color:var(--ink); text-decoration:underline; cursor:pointer; }
.sheet{ position:fixed; inset:0; z-index:20; display:grid; place-items:end center; background:rgba(20,20,20,.35);
  opacity:0; pointer-events:none; transition:opacity .2s; }
.sheet.open{ opacity:1; pointer-events:auto; }
.sheetcard{ width:100%; max-width:var(--maxw); max-height:90vh; overflow-y:auto; background:#fff; border-radius:22px 22px 0 0;
  padding:22px 20px calc(24px + env(safe-area-inset-bottom)); }
.step{ text-align:center; }
.step h3{ font-size:1.25rem; margin:8px 0 6px; }
.step p{ color:var(--muted); margin:0 auto 14px; max-width:34ch; }
.step textarea{ width:100%; min-height:70px; font:inherit; padding:12px 14px; border-radius:14px; border:1px solid var(--line); resize:none; margin:4px 0 10px; }
.step .row{ margin:6px 0 10px; }
.step .row b{ display:block; }
.step .row span{ color:var(--muted); font-size:.9rem; }
.scale{ display:flex; justify-content:center; gap:10px; margin:8px 0 4px; }
.scale button{ width:48px; height:48px; border-radius:50%; border:1px solid var(--line); background:#fff; font:inherit; font-weight:700; cursor:pointer; color:var(--ink); }
.scale button.on{ background:var(--glow); border-color:var(--glow); color:#fff; }
.ends{ display:flex; justify-content:space-between; max-width:290px; margin:0 auto 10px; font-size:.8rem; color:var(--muted); }
.dots{ display:flex; justify-content:center; gap:6px; margin-bottom:8px; }
.dots i{ width:7px; height:7px; border-radius:50%; background:var(--line); }
.dots i.on{ background:var(--glow); }
.breath.small{ width:90px; height:90px; margin:6px auto 14px; }
.breath.slow{ animation-duration:12s; }
.pagephoto{ max-width:100%; max-height:60vh; border-radius:12px; border:1px solid var(--line); display:block; margin:10px auto; }
.app footer{ border-top:1px solid var(--line); margin-top:10px; padding-top:18px; }