*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{
background:#f5f3ee;
font-family:Inter,sans-serif;
color:#11252f;
overflow:hidden;
transition:1.5s;
}

.screen{
display:none;
height:100vh;
padding:40px 28px;
justify-content:center;
align-items:center;
}

.active{
display:flex;
}

.content{
max-width:420px;
width:100%;
}

.brand{
font-size:12px;
letter-spacing:2px;
margin-bottom:40px;
}

.intro-copy,
.ending{
font-family:'Instrument Serif';
font-size:clamp(34px,5vw,48px);
line-height:1.15;
margin-bottom:50px;
}

.small{
font-size:13px;
letter-spacing:2px;
margin-bottom:30px;
}

.button{
background:none;
border:1px solid #11252f;
padding:16px 28px;
font-size:14px;
cursor:pointer;
font-family:Inter;
}

.life-list{
display:flex;
flex-direction:column;
gap:10px;
}

.life{
background:none;
border:none;
text-align:left;
font-size:18px;
padding:4px 0;
opacity:.35;
font-family:'Instrument Serif';
}

.active-life{
opacity:1;
cursor:pointer;
}

.story-wrapper{
width:min(90vw,600px);
}

#storyText{
font-family:'Instrument Serif';
font-size:clamp(22px,4vw,32px);
line-height:1.4;
white-space:pre-line;
}

#poster{
width:min(100%,380px);
aspect-ratio:9/16;
background:#edf4f6;
border:1px solid rgba(17,37,47,.2);
padding:28px;
position:relative;
overflow:hidden;
}

.poster-header{
font-size:10px;
letter-spacing:2px;
margin-bottom:20px;
}

.poster-hero{
font-family:'Instrument Serif';
font-size:58px;
line-height:.9;
margin-bottom:25px;
}

.poster-meta{
font-size:11px;
margin-bottom:30px;
opacity:.7;
}

.box{
border-top:1px solid rgba(17,37,47,.2);
padding-top:10px;
margin-bottom:20px;
}

.label{
font-size:10px;
letter-spacing:1px;
margin-bottom:10px;
}

.copy{
font-family:'Instrument Serif';
font-size:24px;
line-height:1.1;
}

.lesson-copy{
font-family:'Instrument Serif';
font-size:28px;
line-height:1.1;
}

.hidden{
position:absolute;
bottom:20px;
left:28px;
font-size:9px;
opacity:.5;
}

.signature{
position:absolute;
right:-35px;
top:50%;
transform:rotate(90deg);
font-size:10px;
letter-spacing:2px;
}

.actions{
display:flex;
gap:10px;
margin-top:20px;
}

.small-btn{
padding:12px 18px;
}

.grain{
position:fixed;
inset:0;
pointer-events:none;
opacity:.03;
background-image:
radial-gradient(#000 1px, transparent 1px);
background-size:4px 4px;
}

.contours{
position:fixed;
inset:0;
pointer-events:none;
opacity:.025;
background:
repeating-radial-gradient(
circle at center,
#000 0,
#000 1px,
transparent 2px,
transparent 28px
);
}