:root{
  --bg:#070708;
  --fg:#f2f2f2;
  --muted:#b9b9b9;
  --line:rgba(242,242,242,.12);
  --card:rgba(16,16,18,.72);
  --card2:rgba(18,18,20,.88);
  --max: 900px;

  --serif: "EB Garamond", ui-serif, Georgia, "Times New Roman", Times, serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: var(--serif);
  background:
    radial-gradient(1200px circle at 50% -20%, rgba(242,242,242,0.10), rgba(242,242,242,0.02) 30%, transparent 60%),
    radial-gradient(900px circle at 20% 120%, rgba(242,242,242,0.06), transparent 55%),
    radial-gradient(900px circle at 80% 120%, rgba(242,242,242,0.05), transparent 60%),
    linear-gradient(180deg, #070708 0%, #0b0b0e 35%, #070708 100%);
  color:var(--fg);
  line-height:1.5;
  overflow-x:hidden;
}

body::before{
  content:"";
  position: fixed;
  inset:-20%;
  pointer-events:none;
  opacity:.14;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E");
  transform: translate3d(0,0,0);
  animation: grain 10s steps(8) infinite;
}
@keyframes grain{
  0%{ transform: translate(0,0) scale(1); }
  10%{ transform: translate(-2%, -1%) scale(1.01); }
  20%{ transform: translate(-4%, 2%) scale(1.02); }
  30%{ transform: translate(3%, -3%) scale(1.02); }
  40%{ transform: translate(2%, 4%) scale(1.01); }
  50%{ transform: translate(-3%, 3%) scale(1.02); }
  60%{ transform: translate(4%, 0%) scale(1.01); }
  70%{ transform: translate(0%, -4%) scale(1.02); }
  80%{ transform: translate(-2%, 1%) scale(1.01); }
  90%{ transform: translate(3%, 2%) scale(1.02); }
  100%{ transform: translate(0,0) scale(1); }
}
body::after{
  content:"";
  position: fixed;
  inset:0;
  pointer-events:none;
  background: radial-gradient(1200px circle at 50% 40%, transparent 40%, rgba(0,0,0,.55) 100%);
  opacity:.35;
}

a{ color:var(--fg); text-decoration:none; border-bottom:1px solid rgba(242,242,242,.20); }
a:hover{ border-bottom-color: rgba(242,242,242,.75); }

header{
  border-bottom:1px solid var(--line);
  background: rgba(7,7,8,.62);
  backdrop-filter: blur(10px);
  position: sticky;
  top:0;
  z-index: 30;
}
.nav{
  max-width: var(--max);
  margin: 0 auto;
  padding: 14px 18px;
  display:flex;
  gap:14px;
  align-items:center;
  justify-content: space-between;
}
.brand{ display:flex; flex-direction: column; gap:2px; }
.brand strong{ font-weight: 700; letter-spacing: .2px; }
.brand small{ font-family: var(--mono); color: rgba(242,242,242,.62); font-size: 12px; letter-spacing: .3px; }

.links{
  display:flex;
  gap:12px;
  flex-wrap: wrap;
  justify-content:flex-end;
  font-size: 13px;
  font-family: var(--mono);
}

main{
  max-width: var(--max);
  margin: 0 auto;
  padding: 26px 18px 70px;
  position: relative;
  z-index: 2;
}
.kicker{
  font-family: var(--mono);
  font-size: 12px;
  color: rgba(242,242,242,.62);
  text-transform: uppercase;
  letter-spacing: 1.6px;
}
h1{
  font-size: 52px;
  line-height:1.05;
  margin: 18px 0 10px;
  letter-spacing: .2px;
}
h2{ font-size: 26px; margin: 24px 0 10px; }
h3{
  font-family: var(--mono);
  font-size: 14px;
  margin: 18px 0 10px;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: rgba(242,242,242,.78);
}
p{ margin: 10px 0; }
.muted{ color: rgba(242,242,242,.62); }
hr{ border:0; border-top:1px solid var(--line); margin: 22px 0; }

.grid{ display:grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 860px){ .grid.two{ grid-template-columns: 1fr 1fr; } }

.card{
  position: relative;
  background: var(--card);
  border:1px solid var(--line);
  border-radius: 14px;
  padding: 16px;
  margin: 14px 0;
  box-shadow: 0 18px 60px rgba(0,0,0,.28);
  overflow:hidden;
  transform: translateZ(0);
}
.card::before{
  content:"";
  position:absolute;
  inset:-2px;
  background: radial-gradient(600px circle at var(--mx, 30%) var(--my, 20%), rgba(242,242,242,.10), transparent 55%);
  opacity:.0;
  transition: opacity .35s ease;
  pointer-events:none;
}
.card::after{
  content:"";
  position:absolute;
  top:-40%;
  left:-60%;
  width: 140%;
  height: 200%;
  background: linear-gradient(90deg, transparent, rgba(242,242,242,.08), transparent);
  transform: rotate(12deg) translateX(-30%);
  opacity:0;
  pointer-events:none;
}
.card:hover{
  background: var(--card2);
  border-color: rgba(242,242,242,.18);
  transform: translateY(-2px);
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.card:hover::before{ opacity:1; }
.card:hover::after{ opacity:1; animation: sweep 1.2s ease; }
@keyframes sweep{
  0%{ transform: rotate(12deg) translateX(-30%); }
  100%{ transform: rotate(12deg) translateX(30%); }
}

button, .btn{
  font-family: var(--mono);
  background: transparent;
  color: var(--fg);
  border:1px solid rgba(242,242,242,.30);
  padding: 10px 12px;
  border-radius: 12px;
  cursor:pointer;
  display:inline-block;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
button:hover, .btn:hover{
  border-color: rgba(242,242,242,.78);
  transform: translateY(-1px);
}
button:active, .btn:active{ transform: translateY(1px); }

input, textarea{
  width:100%;
  font-size: 18px;
  background: rgba(0,0,0,.18);
  color: var(--fg);
  border:1px solid rgba(242,242,242,.22);
  padding: 10px 12px;
  border-radius: 12px;
  outline:none;
  transition: border-color .12s ease, box-shadow .12s ease;
}
input:focus, textarea:focus{
  border-color: rgba(242,242,242,.68);
  box-shadow: 0 0 0 6px rgba(242,242,242,.06);
}
textarea{ min-height: 110px; resize: vertical; }

blockquote{
  margin: 14px 0;
  padding: 10px 14px;
  border-left: 2px solid rgba(242,242,242,.35);
  color: rgba(242,242,242,.68);
}

ul{ margin: 8px 0 8px 18px; }
li{ margin: 6px 0; }

.footer{
  margin-top: 44px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  color: rgba(242,242,242,.60);
  font-size: 13px;
  font-family: var(--mono);
}
.badge{
  display:inline-block;
  padding: 4px 8px;
  border:1px solid rgba(242,242,242,.24);
  border-radius: 999px;
  font-size: 12px;
  color: rgba(242,242,242,.68);
  font-family: var(--mono);
}
.small{ font-size: 13px; font-family: var(--mono); color: rgba(242,242,242,.62); }

pre{
  background: rgba(0,0,0,.28);
  border: 1px solid var(--line);
  padding: 12px;
  border-radius: 12px;
  overflow:auto;
  color: #eaeaea;
  font-family: var(--mono);
  font-size: 13px;
}

body.fade-out main{
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .18s ease, transform .18s ease;
}
body main{
  opacity: 1;
  transform: translateY(0);
  transition: opacity .22s ease, transform .22s ease;
}

.reveal{
  opacity: 0;
  transform: translateY(14px);
  filter: blur(2px);
  transition: opacity .55s ease, transform .55s ease, filter .55s ease;
}
.reveal.in{ opacity: 1; transform: translateY(0); filter: blur(0); }

#marginalia{
  position: fixed;
  right: 18px;
  top: 96px;
  width: min(320px, calc(100vw - 36px));
  z-index: 40;
  pointer-events:none;
  opacity:.92;
}
#marginalia .note{
  background: rgba(0,0,0,.38);
  border: 1px solid rgba(242,242,242,.18);
  border-radius: 14px;
  padding: 12px 12px;
  box-shadow: 0 20px 70px rgba(0,0,0,.35);
}
#marginalia .note .label{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: rgba(242,242,242,.62);
  margin-bottom: 8px;
}
#marginalia .note .text{ font-size: 18px; }
@media (max-width: 980px){ #marginalia{ display:none; } }

.sound{
  display:flex;
  align-items:center;
  gap:8px;
  font-family: var(--mono);
  font-size: 12px;
  color: rgba(242,242,242,.62);
}
.sound button{ padding: 8px 10px; border-radius: 12px; }

#cursorDot{
  position: fixed;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 1px solid rgba(242,242,242,.55);
  background: rgba(242,242,242,.05);
  pointer-events:none;
  z-index: 50;
  transform: translate(-50%, -50%);
  opacity: .0;
  transition: width .12s ease, height .12s ease, opacity .18s ease, background .12s ease;
}
#cursorDot.on{ opacity: .85; }
#cursorDot.big{ width: 26px; height: 26px; background: rgba(242,242,242,.10); }

.prayer{
  position: fixed;
  left: var(--x, 50%);
  top: var(--y, 75%);
  max-width: 520px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(242,242,242,.22);
  background: rgba(0,0,0,.42);
  box-shadow: 0 22px 70px rgba(0,0,0,.45);
  color: rgba(242,242,242,.92);
  z-index: 45;
  opacity: 0;
  transform: translate(-50%, 8px);
  animation: prayerUp 2.6s ease forwards;
  pointer-events:none;
}
@keyframes prayerUp{
  0%{ opacity:0; transform: translate(-50%, 12px); filter: blur(1px); }
  12%{ opacity:1; transform: translate(-50%, 0); filter: blur(0); }
  70%{ opacity:1; }
  100%{ opacity:0; transform: translate(-50%, -34px); filter: blur(1px); }
}

.burn{ animation: burnAway .6s ease forwards; }
@keyframes burnAway{
  0%{ opacity:1; filter: blur(0); transform: translateY(0) scale(1); }
  100%{ opacity:0; filter: blur(6px); transform: translateY(10px) scale(.98); }
}

body[data-page="confessional"]{
  background:
    radial-gradient(900px circle at 50% -10%, rgba(255,225,200,0.07), transparent 60%),
    linear-gradient(180deg, #070708 0%, #0a090a 50%, #070708 100%);
}
body[data-page="timesheet"]{
  background:
    radial-gradient(1100px circle at 50% -10%, rgba(200,230,255,0.07), transparent 60%),
    linear-gradient(180deg, #070708 0%, #06070a 55%, #070708 100%);
}
body[data-page="lottery"]{
  background:
    radial-gradient(800px circle at 50% 0%, rgba(242,242,242,0.12), transparent 55%),
    linear-gradient(180deg, #070708 0%, #0b0b0e 35%, #070708 100%);
}