/* Bio section: a full-page scene below the projects. It has no background of its own, so the
   fixed sky and its clouds show through. */
#about{
    position: relative;
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    overflow: hidden;
    /* Stacked from the bottom: the question buttons, then the text box, over the picture */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    padding: 8vh 16px 4vh;
}

/* The picture fills the whole section as its background. It is cropped to fit (never squished), and
   anchored so the face stays above the buttons and text box. */
.bio-background{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 56% 36%;
    z-index: 1;
    /* Fades in as the section scrolls into view; --about-fade is set by bio.js */
    opacity: var(--about-fade, 1);
}

/* The questions, as buttons just above the text box */
.bio-choices{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    width: min(1100px, 100%);
    position: relative;
    z-index: 1;
}

/* Dating-sim palette: deep plum panels with pink trim, yellow for the current pick */
.bio-choice{
    padding: 7px 14px;
    background-color: rgba(42, 16, 58, 0.85);
    border: 2px solid #ff9ecb;
    border-radius: 999px;
    color: #fff6fb;
    font-family: 'Fredoka', system-ui, sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.15s ease;
}
.bio-choice:hover,
.bio-choice:focus-visible{
    background-color: rgba(70, 24, 90, 0.95);
    transform: translateY(-2px);
}
/* The question whose answer is showing */
.bio-choice[aria-pressed="true"]{
    background-color: #ffd166;
    border-color: #ff9ecb;
    color: #2a1035;
}

/* Text box along the bottom of the scene, with a name tag over its top-left corner */
.dialogue-box{
    position: relative;
    z-index: 1;
    width: min(900px, 100%);
    min-height: 14vh;
    padding: 24px 22px 16px;
    background-color: rgba(42, 16, 58, 0.88);
    border: 3px solid #ff9ecb;
    border-radius: 16px;
    box-shadow: 0 5px 0 rgba(0, 0, 0, 0.35);
    color: #fff6fb;
}
.dialogue-box::before{
    content: "James";
    position: absolute;
    top: -13px;
    left: 20px;
    padding: 3px 12px;
    background-color: #ff9ecb;
    border-radius: 999px;
    color: #2a1035;
    font-family: 'Press Start 2P', cursive;
    font-size: 0.62rem;
    line-height: 1.4;
}

.dialogue-box p{
    max-width: 62ch;
    margin-bottom: 0.8em;
    font-family: 'Fredoka', system-ui, sans-serif;
    font-size: 1.15rem;
    font-weight: 500;
    line-height: 1.5;
}
.dialogue-box p:last-child{ margin-bottom: 0; }
@media (max-width: 700px){
    /* Keep the buttons and text box compact so they leave the face showing on a tall, narrow screen */
    #about{ gap: 10px; }
    .bio-choices{ gap: 6px; }
    .dialogue-box{ padding: 22px 14px 12px; min-height: 0; }
    .dialogue-box p{ font-size: 0.95rem; }
    .bio-choice{ font-size: 0.78rem; padding: 5px 10px; }
}
/* The site sets a pixel font on every element, so the letter spans (and any bold/italic/link inside an
   answer) have to be told to use the answer's font */
.dialogue-box p *{ font-family: inherit; }

/* Letters roll out one at a time (see bio.js); they all take up their space from the start */
.dialogue-box .letter{ opacity: 0; }
.dialogue-box .letter.shown{ opacity: 1; }
.dialogue-box{ cursor: pointer; }

/* Words wrapped in <b> or <em> in bio.json get a highlight color */
.dialogue-box b,
.dialogue-box strong{ color: #ffd166; font-weight: 600; }
.dialogue-box em{ color: #ff9ecb; font-style: normal; }
/* Book titles and the like: <i> in bio.json */
.dialogue-box i{ font-style: italic; }
.dialogue-box a{ color: #ffd166; }