/* Look for the "Meet Dr. Rimi" page: the Awaken palette, fonts, smoky ember background, ring cursor and header. The page adds its own layout on top. */
:root{
  --ink:#FFF4EA; --soft:rgba(255,246,238,.9); --mute:rgba(255,240,228,.72); --faint:rgba(255,244,234,.24);
  --orange:#F36435; --crimson:#CD2653; --ember:#2a0d06; --cream:#FFE3C8; --brown:#5a2410; --paper:rgba(255,246,238,.95);
  --mark:"Unbounded", system-ui, sans-serif; --serif:"Marcellus", Georgia, serif; --body:"Hanken Grotesk", system-ui, sans-serif;
  --pad:clamp(20px,5vw,84px); --ease:cubic-bezier(.16,1,.3,1);
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--ember);color:var(--ink);font:300 18px/1.65 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
p,h1,h2,h3,figure,blockquote{margin:0}
h1,h2,h3{font-family:var(--serif);font-weight:400;text-transform:uppercase;line-height:1.04;letter-spacing:.01em;text-wrap:balance}
:focus-visible{outline:1px solid var(--cream);outline-offset:4px}
#scene{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0;background:radial-gradient(circle at 60% 40%,#F36435,#9a3214 55%,#2a0d06)}
main{position:relative;z-index:2}

header{position:fixed;top:0;left:0;right:0;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:calc(18px + env(safe-area-inset-top,0px)) max(var(--pad),env(safe-area-inset-right,0px)) 18px max(var(--pad),env(safe-area-inset-left,0px));pointer-events:none}
header > *{pointer-events:auto}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;font:300 13px/1 var(--mark);letter-spacing:.18em;text-transform:uppercase}
.brand img{width:30px;height:30px}
.head-actions{display:flex;gap:10px}
.give{font:400 12px/1 var(--body);letter-spacing:.2em;text-transform:uppercase;text-decoration:none;border:1px solid var(--faint);border-radius:999px;padding:11px 18px;background:rgba(42,13,6,.15)}
.give:hover{background:var(--ink);color:var(--crimson)}
@media (max-width:600px){.brand span{display:none}}

.kicker{font:400 12px/1.2 var(--body);letter-spacing:.24em;text-transform:uppercase;color:var(--cream);display:flex;align-items:center;gap:14px}
.kicker::before{content:"";width:28px;height:1px;background:currentColor}
.copy{max-width:62ch;color:var(--soft)}
.btn{display:inline-flex;align-items:center;gap:12px;padding:16px 26px;border-radius:999px;border:1px solid var(--ink);font:400 12px/1 var(--body);letter-spacing:.22em;text-transform:uppercase;text-decoration:none;background:transparent;color:var(--ink);white-space:nowrap;transition:background .3s var(--ease),color .3s var(--ease)}
.btn:hover,.btn.fill{background:var(--ink);color:var(--crimson)}
.btn.fill:hover{background:var(--cream)}
.btn:active{transform:scale(.97)}
.portrait{position:relative;overflow:hidden;background:linear-gradient(135deg,#F47240,#C9431D)}
.portrait img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.portrait::after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,#F47240,#C9431D);mix-blend-mode:color;opacity:.2;pointer-events:none}

/* words and blocks rise in as they enter the screen */
.js [data-r]{opacity:0;transform:translate3d(0,28px,0);transition:opacity 1s var(--ease),transform 1.1s var(--ease)}
.js [data-r].in{opacity:1;transform:none}
[data-r="2"]{transition-delay:.12s}[data-r="3"]{transition-delay:.24s}

/* closing call to action, shared by all templates */
.closing{position:relative;z-index:2;padding:clamp(90px,14vh,160px) var(--pad) 150px;display:grid;justify-items:center;text-align:center;gap:22px}
.closing h2{font-size:clamp(34px,4.6vw,72px);max-width:16ch}
.closing .row{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:10px}

.cursor{position:fixed;inset:0;z-index:40;pointer-events:none;display:none}
.cursor__ring{position:absolute;left:0;top:0;width:28px;height:28px;border:1px solid var(--ink);border-radius:14px;opacity:0;will-change:transform,width,height,opacity}
@media (pointer:fine) and (min-width:900px){.cursor{display:block}body{cursor:none}}

@media (prefers-reduced-motion:reduce){.js [data-r]{opacity:1;transform:none;transition:none}.btn{transition:none}}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}