/* Golden hour: shared look for every flelk.com page (except Yuki).
   Pair with /public/scene.js, which draws the sun and pine ridges. */
:root { --paper:#fff6e8; --ink:#2d1b2e; --muted:#7a5d6b; --plum:#3d1f40; --line:#ead9c4; --accent:#e0623f; --err:#b3261e; color-scheme:light; }
* { box-sizing:border-box; } [hidden] { display:none !important; }
html, body { margin:0; min-height:100%; }
body { color:var(--ink); font:16px/1.6 "DM Sans", system-ui, sans-serif; overflow-x:hidden;
  background:linear-gradient(180deg, #ffd3a1 0%, #ffab7f 30%, #f2776c 55%, #b24a72 78%, #4a2552 100%) fixed; }
a { color:var(--accent); }
code { font:14px ui-monospace, Menlo, monospace; background:#f3e6d3; border-radius:6px; padding:2px 6px; }

/* Scene */
.scene { position:fixed; inset:0; pointer-events:none; overflow:hidden; }
.sun { position:absolute; left:50%; top:56%; width:min(76vw, 560px); aspect-ratio:1; transform:translate(-50%, -50%); border-radius:50%;
  background:radial-gradient(circle, #fff3c4 0%, #ffd27d 40%, rgba(255,190,110,0) 70%); animation:breathe 9s ease-in-out infinite; }
@keyframes breathe { 50% { transform:translate(-50%, -50%) scale(1.04); } }
.ridge { position:absolute; left:-5%; width:110%; bottom:0; display:block; transition:transform .6s cubic-bezier(.2,.7,.2,1); }

/* Paper cards with a little grain */
.paper { background:var(--paper); border-radius:26px; position:relative; overflow:hidden; box-shadow:0 30px 80px rgba(74,37,82,.3); }
.paper::before { content:""; position:absolute; inset:0; opacity:.16; pointer-events:none; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.paper > * { position:relative; }
.pop { animation:pop .8s cubic-bezier(.2,.8,.2,1) both; }
@keyframes pop { from { opacity:0; transform:translateY(20px) scale(.985); } }

/* Type */
.badge { display:inline-block; font:700 11px/1 "DM Sans", sans-serif; letter-spacing:.2em; text-transform:uppercase; color:var(--accent);
  border:1.5px solid currentColor; border-radius:999px; padding:7px 12px; margin-bottom:14px; }
h1 { font:700 clamp(40px, 9vw, 68px)/1 Fraunces, Georgia, serif; margin:0 0 10px; letter-spacing:-.03em; color:var(--plum); }
h2 { font:400 40px/1.05 Fraunces, Georgia, serif; margin:0 0 8px; color:var(--plum); }
.lede { font:italic 400 20px/1.4 Fraunces, Georgia, serif; color:var(--muted); margin:0; }
.muted { color:var(--muted); margin:0; }

/* Page frame for signed-in pages */
.wrap { position:relative; z-index:1; max-width:880px; margin:0 auto; padding:24px 20px 56px; min-height:100svh; display:flex; flex-direction:column; }
.top { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }
.mark { font:700 28px/1 Fraunces, Georgia, serif; letter-spacing:-.03em; color:var(--plum); text-decoration:none; }
.top nav { display:flex; gap:8px; flex-wrap:wrap; }
.pill { font:700 14px/1 "DM Sans", sans-serif; color:var(--plum); text-decoration:none; padding:10px 14px; border-radius:999px;
  background:rgba(255,246,232,.7); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); transition:background .2s; }
.pill:hover { background:var(--paper); }

/* Buttons and forms */
.actions { display:grid; gap:10px; }
.btn { appearance:none; display:block; width:100%; font:700 16px/1 "DM Sans", sans-serif; padding:16px; border-radius:14px; cursor:pointer;
  text-decoration:none; text-align:center; border:2px solid var(--plum); background:var(--plum); color:var(--paper); transition:transform .15s, box-shadow .2s; }
.btn:hover { transform:translateY(-2px); box-shadow:0 8px 0 -2px rgba(61,31,64,.25); }
.btn.ghost { background:transparent; color:var(--plum); }
.btn:disabled { opacity:.6; cursor:default; }
form { display:grid; gap:14px; text-align:left; margin-top:18px; }
label { display:grid; gap:6px; font-size:14px; font-weight:700; color:var(--plum); }
input, textarea { font:inherit; color:var(--ink); background:#fffdf8; border:2px solid var(--line); border-radius:12px; padding:11px 13px; width:100%; }
input:focus, textarea:focus { outline:none; border-color:var(--accent); }
textarea { min-height:86px; resize:vertical; }
.hp { position:absolute; left:-9999px; }
.status { min-height:1.4em; margin:0; font-size:14px; } .status.err { color:var(--err); }

@media (prefers-reduced-motion:reduce) { .sun, .pop { animation:none; } .ridge, .btn, .pill { transition:none; } }