:root {
    /* Main Accent & Brand Colors */
    --primary: #ff6a00;          /* Orange accent color */
    --primary-hover: #ffa63a;    /* Darker orange for hovers */
    --highlight: #ab0028;        /* Reddish highlight text color */
    --secondary: #ffa200;

    /* Typography Colors */
    --text-main: #070707;        /* Standard body text dark gray */
    --text-muted: #3e3e3e;       /* Medium gray for subtitles & menu items */
    --text-light: #666666;       /* Light gray for footers */
    --text-on-accent: #ffffff;   /* White text for buttons */

    /* Backgrounds & Container Tinting */
    --bg-body: #272727;          /* Light grayish blueprint background */
    --bg-card: #d2e9fe;          /* White container backgrounds */
    --bg-tint-light: #fafafa;    /* Soft gray tint for profile cards & chapter lists */
    --bg-tint-warm: #fffaf0;     /* Soft warm tint for status box */

    /* Borders, Lines & Shadows */
    --border-light: #eeeeee;     /* Very faint separation lines */
    --border-card: #ddeeff;      /* Soft blue-ish card borders */
    --border-dashed: #dddddd;    /* Dashed lines for list styling */
    --border-dots: #cccccc;      /* Dotted line dividers */
    --shadow-main: rgba(0, 0, 0, 0.73);
    --page-padding: calc(5*10px);
    --subtitle: #3e3e3e;
}

/* --- Base Reset & Setup --- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    transition: all 0.2s;
    overflow-wrap: break-word; /* modern way */
    word-wrap: break-word;     /* fallback for older browsers */
}

body {
    font-family: Serif;
    font-size: 1rem;
    background-color: var(--bg-body);
    color: var(--text-main);
    line-height: 1.6;
}

a {
    color: var(--primary);
    text-decoration: underline;
}

a:hover {
    text-decoration: underline;
    color: var(--primary-hover)
}

/* --- Kassenbon Style Centered Container --- */
.page-container {
    max-width: 1200px;
    width: 100%; /* Keeps it from sticking to screen edges when scaled down */
    margin: auto;
    background-color: var(--bg-card);
    mask-image: 
    linear-gradient(to top, transparent 0, black 2rem),
    linear-gradient(to bottom, transparent 0, black 2rem), 
    linear-gradient(to right, transparent 0, black 2rem),
    linear-gradient(to left, transparent 0, black 2rem);
    mask-composite: intersect;
}

.chapter-button {
  display: inline-flex;
  background: var(--primary);
  padding: 0.5rem 2rem;
  border: 1px solid var(--primary);
  color: var(--text-on-accent);
}

.chapter-button {
  text-decoration: none;
  color: var(--text-on-accent);
}

.chapter-button:hover {
  background: var(--primary-hover);
  border: 1px solid black;
  color: var(--text-on-accent);
  text-decoration: none;
}

.chapter-blinks { 
  text-decoration: none;
}

.chapter-blinks:hover { 
  text-decoration: none;
}

main {
  padding: 0rem 5rem;
}

/* --- Header System --- */
.site-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--primary);
    mask-image: linear-gradient(to top, transparent 0, black 10%);
    color: var(--text-on-accent);
    max-height: 31em;
}

center{
        transform: translateY(-15em);
        display: block;
        mix-blend-mode: add;
    }
    
.site-header h1{
    margin: 0 1rem;
    font-size: 2rem;
    font-weight: 800;
    text-shadow: 0 0 0.3rem black, 0 0 1rem var(--primary);
}
    .site-header h2{
    margin: 0 1rem;
    font-weight: 800;
    font-size: 1.4rem;
    text-shadow: 0 0 0.3rem black, 0 0 1rem var(--primary);
}

.header-banner {
    /* 1. Scale down to its native maximum bounds */
    width: 100%;    /* Caps the width at its max native resolution */
    height: 350px;        /* Sets your fixed maximum target height */
    
    /* 2. Strict cropping & alignment behavior */
    object-fit: cover;    
    object-position: center; 
    margin-bottom: 1rem;

    /* 3. The Mask: Fades to transparent at the very top */
    mask-image: linear-gradient(to top, transparent 0%, black 10%);
    mask-composite: intersect;
  }

.logo {
    margin-bottom: 1rem;
}

.nav-menu {
    width: 100%;
    text-align: center;
    mask-image: linear-gradient(to top, transparent 0%, black 15%), linear-gradient(to bottom, transparent 0%, black 25%);
    mask-composite: intersect;
    padding: 1rem 1rem 3rem 1rem;
    transform: translateY(-6em);
}

.nav-menu ul {
    display: inline-flex;
    list-style: none;
    margin: auto;
    
}

.nav-menu a {
    
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-on-accent);
    width: 100%;
    height: 100%;
    text-decoration:none;
    padding: .5rem 5rem;
    mask-image: radial-gradient(black 50%, transparent 100%),linear-gradient(to top, transparent 0, black 15%),linear-gradient(to bottom, transparent 0, black 15%), linear-gradient(to right, transparent 0, black 15%),linear-gradient(to left, transparent 0, black 15%);
    mask-composite: intersect;
}



.nav-menu li.active a, .nav-menu a:hover {
    color: var(--text-on-accent);
    background-color: var(--primary-hover);
    text-decoration: none;
}

/* --- Structural Layouts & Utility Blocks --- */
.content-section {
    background: var(--bg-card);
}

.center-text {
    text-align: center;
}

.subtitle {
    color: var(--subtitle);
    margin-top: 5px;
    margin-bottom: 25px;
    font-style: italic;
}

.highlight {
    color: var(--highlight);
}

.info-card{
    
}

.history-box .text-block-foreground{
    margin: 1rem 0;
}

/* --- Grid 1: Index Page Re:Zero Text/Image --- */
.info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: top;
    gap: 1rem;
    margin: 30px 0;
}

img {
  mask-image: linear-gradient(to top, transparent 0, black 5%),linear-gradient(to bottom, transparent 0, black 5%), linear-gradient(to right, transparent 0, black 5%),linear-gradient(to left, transparent 0, black 5%);
    mask-composite: intersect;
    max-width: 100%;
}

.text-justify {
   text-align: justify;
}

.no-justify-text{
    text-align: left;
}

.content-img {
    max-width: 100%;
    border-radius: 0px;
    object-fit: cover;
}

/* --- Grid 2: About Page Profile Cards --- */
.profile-grid {
    display: block;
    grid-template-columns: repeat(auto-fit, minmax(220px, 2fr));
    gap: 30px;
}

.profile-card {
    background-color: var(--bg-tint-light);
    border: 2px solid var(--primary);
    padding: 20px;
    margin: 1rem;
    text-align: left;
    display: grid;
    grid-template-columns: 20% 80%;
}

.profile-subcard {
  padding: 1rem;
}

.avatar {
    width: 120px;
    object-fit: cover;
    margin: auto;
    border-radius: 50%;
    border: 1px solid var(--primary);
    mask-image: none;
}

.profile-link {
    
}

.profile-link:hover {
    
}

/* --- Custom UI Content Callouts --- */
.disclaimer-box, .story-box, .links-box, .status-box, .history-box {
    margin: 1rem 0;
}

.disclaimer-box h4, .story-box h4, .links-box h4, .status-box h4, .history-box h4 {
    margin-bottom: 1rem;
}

.disclaimer-box p, .story-box p, .history-box p {
   
}

p {
  margin: 1rem 1rem;
}

.profile-card h2, .profile-card p {
  margin: 0 2rem;
}

.chapter-img {
  object-fit: cover;
  display: flex;
  margin: auto;
}

.text-block {
  background-color: var(--bg-tint-warm);
    border: 1px solid var(--primary);
    padding: 1rem;
}

.text-block-foreground {
  background-color: var(--bg-tint-light);
    border: 1px solid var(--primary);
    padding: 1rem;
}

.status-box {
    background-color: var(--bg-tint-warm);
    padding: 20px;
    border: 1px solid var(--primary);
}

.bold-text {
    font-weight: bold;
    margin: 0 15px;
    
}

/* --- Chapter Layouts --- */
.chapter-list-container {
    background-color: var(--bg-tint-light);
    padding: 25px;
    border: 1px solid var(--primary);
}

.chapter-links li {
    padding: 8px 0;
    border-bottom: 1px dashed var(--border-dashed);
    list-style: none;
}

.chapter-links li:last-child {
    border-bottom: none;
}

.chapter-links span {
    font-weight: 600;
    color: var(--primary);
}

/* --- Global Dividers & Footer --- */
.dots-divider {
    border: none;
    border-top: 1px solid var(--primary);
    width: 100%;
    margin: 40px auto;
    mask-image: radial-gradient(black 50%, transparent 100%),linear-gradient(to top, transparent 0, black 15%),linear-gradient(to bottom, transparent 0, black 15%), linear-gradient(to right, transparent 0, black 15%),linear-gradient(to left, transparent 0, black 15%);
    mask-composite: intersect;
}

.line-divider {
    border: none;
    border-top: 1px solid var(--primary);
    width: 100%;
    margin: 40px auto;
    mask-image: radial-gradient(black 50%, transparent 100%),linear-gradient(to top, transparent 0, black 15%),linear-gradient(to bottom, transparent 0, black 15%), linear-gradient(to right, transparent 0, black 15%),linear-gradient(to left, transparent 0, black 15%);
    mask-composite: intersect;
}

.site-footer {
    text-align: center;
    padding: 1rem 2rem 2rem 2rem;
    margin-top: 20px;
    border-top: 1px solid var(--primary);
    color: var(--text-light);
    background-color: white;
    
}

.signature-section {
    text-align: center; /* Centers the figure element inside */
    margin: 1rem 0;

    
    
}

.author-signature {
    display: inline-block;
    margin: 0 auto;
    width: 100%;
}

.signature-img {
    width: 200px;       /* Fits perfectly right between 100px and 200px */
    height: 200px;
    object-fit: cover;
    margin-bottom: 8px;
}

.signature-caption {
    font-size: 0.95rem;
    color: var(--text-muted);
    font-weight: 500;
}

.double-divider {
    border-top: 2px dashed black;
    border-bottom: 2px dashed black;
    border-right: none;
    border-left: none;
    padding: 1px;
    margin: 2rem auto;
    width: 80%;
}

/* --- Responsive Adaptations --- */
@media (max-width: 800px) {
    
*{
    font-size: 1rem;
}
    .page-container {
        width: 100%;
        margin: 0;
        border-radius: 0;
        mask-image: none;
    }

    .info-grid {
        display:block;
    }
    .chapter-list-container {
        margin-top: 1rem;
    }

    main {
        padding: 0 0 1.5rem 0; /* Prevents text from hitting the very edge of the card */
    }
    
    h1, h2 {
        text-align: center;
        padding: 0 1rem;
        margin: 0 1rem;
    }

    h3,h4{
        margin: 0 1rem;
    }

    .text-block, .text-block-foreground{
        border-left: none;
        border-right: none;
        padding: 1rem 0;
    }

    .text-block p{
        margin: 0 2rem;
        border-left: none;
        border-right: none;
    }

    center{
        transform: translateY(-12em);
        display: block;
        mix-blend-mode: add;
    }
    
    .site-header h1{
        margin: 0 1rem;
        font-size: 2rem;
        font-weight: 800;
        text-shadow: 0 0 0.3rem black, 0 0 3rem var(--primary);
    }
     .site-header h2{
        margin: 0 1rem;
        font-weight: 800;
        font-size: 1.4rem;
        text-shadow: 0 0 0.3rem black, 0 0 3rem var(--primary);
    }

    
    img {
        max-width: 100%;
    }
    
    .header-banner {
        height: auto; /* Let the banner image scale naturally on small screens */
        max-height: 250px; /* Cap it so it doesn't take up the whole screen */
        margin-bottom: 0.5rem;
    }
    
    .nav-menu {
        transform: translateY(-8em); /* REMOVE the translateY entirely */
        mask-image: none;
        padding: 0;
        margin: 1rem auto 0 auto;
        width: 100%;
    }

    .nav-menu ul {
        display: flex;
        flex-direction: column; /* Stack the menu links vertically */
        gap: 0.1rem; /* Neat spacing between links */
        width: 100%;
        padding: 0 1rem;
    }

    .nav-menu a {
        display: block;
        width: 100%;
        padding: 0.1rem 1rem; /* Comfortable touch targets for mobile */
        text-align: center;
        box-sizing: border-box;
    }    
    p {
        margin:0;
    }

    .profile-card {
        /* 1. Switch from columns to a stacked vertical layout */
        display: flex;
        flex-direction: column;
        align-items: center;    /* Centers the avatar and content horizontally */
        text-align: center;     /* Centers the text inside for a clean mobile look */
        padding: 20px;
        margin: 1rem 0;        /* Removes wide horizontal bleed margins */
    }

    .avatar {
        margin-bottom: 1rem;    /* Adds a neat gap between the image and the name */
    }

    .profile-card h2, 
    .profile-card p {
        margin: 0.5rem 0;       /* Removes the huge desktop 2rem side margins */
        width: 100%;
    }

}