/* begela.com — shared styles. Milk surface, espresso ink. */
:root{--milk-1:#fefdfb;--milk-2:#f8f5f0;--milk-3:#f0eae1;--ink:#2f2a25;--ink-soft:#6d665e;--ink-faint:#9b948b;--hairline:rgba(47,42,37,.14);--ease:cubic-bezier(.16,1,.3,1)}
@supports (color:oklch(.5 0 0)){:root{--milk-1:oklch(.996 .002 95);--milk-2:oklch(.983 .007 84);--milk-3:oklch(.962 .014 74);--ink:oklch(.29 .019 62);--ink-soft:oklch(.45 .021 62);--ink-faint:oklch(.62 .018 70);--hairline:color-mix(in oklab,var(--ink) 14%,transparent)}}
*{box-sizing:border-box}html,body{margin:0;padding:0}
body{min-height:100vh;background:var(--milk-2);color:var(--ink);font-family:"Work Sans",ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
::selection{background:color-mix(in oklab,var(--ink) 12%,var(--milk-1));color:var(--ink)}
a{color:inherit}
.backdrop{position:fixed;inset:0;z-index:0;pointer-events:none}
.field{position:absolute;inset:0;background:radial-gradient(120% 70% at 50% -12%,var(--milk-1) 0%,transparent 62%),linear-gradient(178deg,var(--milk-1) 0%,var(--milk-2) 52%,var(--milk-3) 100%)}
.halo{position:absolute;top:50%;left:50%;width:72vmax;aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:radial-gradient(circle,color-mix(in oklab,white 88%,var(--milk-1)) 0%,transparent 64%);animation:halo 20s ease-in-out infinite}
.backdrop::after{content:"";position:absolute;inset:0;opacity:.32;mix-blend-mode:multiply;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='0.35'/></svg>")}
/* nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:1.75rem 2rem}
.brand{font-family:"Instrument Serif",serif;font-size:1.5rem;text-decoration:none}
.nav ul{display:flex;gap:2rem;list-style:none;margin:0;padding:0}
.nav a.link{font-size:11px;text-transform:uppercase;letter-spacing:.35em;text-decoration:none;color:var(--ink-soft);position:relative;padding-bottom:4px}
.nav a.link::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.nav a.link:hover::after,.nav a.link[aria-current=page]::after{transform:scaleX(1)}
.nav a.link[aria-current=page]{color:var(--ink)}
.toggle{display:none;background:none;border:0;font:inherit;font-size:11px;letter-spacing:.35em;text-transform:uppercase;color:var(--ink);cursor:pointer}
@media (max-width:640px){.toggle{display:block}.nav ul{position:fixed;inset:0;flex-direction:column;align-items:center;justify-content:center;background:var(--milk-2);opacity:0;pointer-events:none;transition:opacity .5s var(--ease)}.nav.open ul{opacity:1;pointer-events:auto}.nav .toggle{z-index:2}}
/* layout */
.page{position:relative;z-index:10;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8rem 1.5rem 4rem}
.content{width:100%;max-width:42rem;text-align:center;display:flex;flex-direction:column;align-items:center}
.wide{max-width:60rem}
.eyebrow{margin:0;font-size:11px;text-transform:uppercase;letter-spacing:.45em;color:var(--ink-soft)}
h1,h2,h3{font-family:"Instrument Serif","Times New Roman",serif;font-weight:400;letter-spacing:-.01em;text-wrap:balance}
h1{margin:1.5rem 0 0;font-size:clamp(2.75rem,8vw,4.5rem);line-height:1.04}
h1 em,h2 em{font-style:italic;color:var(--ink-soft)}
h2{font-size:clamp(1.75rem,4vw,2.5rem);margin:0}
.rule{display:block;width:7rem;height:1px;margin:3rem auto 0;background:var(--hairline);animation:draw 1.5s var(--ease) 620ms both}
.lede{margin:2.5rem auto 0;max-width:26rem;font-size:15px;line-height:1.65;color:var(--ink-soft);text-wrap:pretty}
.foot{position:relative;z-index:10;text-align:center;padding:2rem;font-size:10px;text-transform:uppercase;letter-spacing:.34em;color:var(--ink-faint)}
.btn{display:inline-block;margin-top:3rem;padding:.95rem 2.25rem;border:1px solid var(--hairline);border-radius:999px;font-size:11px;letter-spacing:.35em;text-transform:uppercase;text-decoration:none;background:color-mix(in oklab,var(--milk-1) 70%,transparent);transition:background .5s var(--ease),border-color .5s var(--ease);cursor:pointer;font-family:inherit;color:var(--ink)}
.btn:hover{background:var(--milk-1);border-color:var(--ink-faint)}
/* grids */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:1px;margin-top:4rem;width:100%;background:var(--hairline);border:1px solid var(--hairline)}
.card{background:color-mix(in oklab,var(--milk-1) 80%,var(--milk-2));padding:2.5rem 2rem;text-align:left;transition:background .6s var(--ease)}
.card:hover{background:var(--milk-1)}
.card .num{font-size:10px;letter-spacing:.34em;color:var(--ink-faint)}
.card h3{font-size:1.75rem;margin:1.25rem 0 .75rem}
.card p{margin:0;font-size:14px;line-height:1.65;color:var(--ink-soft)}
.prose{text-align:left;max-width:34rem;margin:3rem auto 0;font-size:15px;line-height:1.8;color:var(--ink-soft)}
.prose p+p{margin-top:1.25rem}
.quote{font-family:"Instrument Serif",serif;font-style:italic;font-size:1.75rem;line-height:1.3;color:var(--ink);margin:4rem 0 0}
/* form */
form{width:100%;max-width:28rem;margin:3rem auto 0;text-align:left;display:grid;gap:1.75rem}
label{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.34em;color:var(--ink-faint);margin-bottom:.5rem}
input,textarea{width:100%;background:transparent;border:0;border-bottom:1px solid var(--hairline);padding:.6rem 0;font:inherit;font-size:15px;color:var(--ink);outline:none;transition:border-color .4s}
input:focus,textarea:focus{border-color:var(--ink-soft)}
textarea{resize:vertical;min-height:6rem}
form .btn{justify-self:center;margin-top:1rem}
.note{text-align:center;font-size:13px;color:var(--ink-soft);min-height:1.2em}
/* motion */
.rise{animation:rise 1.15s var(--ease) both;animation-delay:calc(var(--d,0) * 140ms + 60ms)}
.reveal{opacity:0;transform:translateY(16px);filter:blur(6px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease),filter 1.1s var(--ease)}
.reveal.in{opacity:1;transform:none;filter:none}
body.leaving .page{opacity:0;transform:translateY(-8px);filter:blur(4px);transition:all .45s var(--ease)}
@keyframes rise{from{opacity:0;transform:translateY(16px);filter:blur(7px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes draw{from{transform:scaleX(0);opacity:0}to{transform:scaleX(1);opacity:1}}
@keyframes halo{0%,100%{transform:scale(1);opacity:.7}50%{transform:scale(1.14);opacity:1}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.reveal{opacity:1;transform:none;filter:none}}