/* ============================================================================
   DRIFTWARD BASTION — EASY VISUAL SETTINGS
   ============================================================================

   THIS IS THE CSS FILE YOU SHOULD EDIT.

   You do not need to understand CSS. Only change the values in the
   "EASY SETTINGS" section below.

   Example:

       --easy-main-color: #ff9f0a;

   Change only #ff9f0a. Keep the name, colon, and semicolon.

   GOOD:  --easy-main-color: #28b8ff;
   BAD:   easy main color = blue

   COLOR VALUES begin with #.
   SIZE VALUES usually end with px.
   SPEED VALUES usually end with ms.

   Do not edit anything below the line that says "STOP EDITING HERE".
============================================================================ */

:root {
    /* ========================================================================
       1. COLORS
       Use a color picker website to find # color values.
    ======================================================================== */

    --easy-main-color: #ff9f0a;          /* Orange buttons and highlights */
    --easy-light-highlight: #ffc688;     /* Lighter orange label text */
    --easy-page-background: #0d0e12;    /* Background behind everything */
    --easy-dark-background: #121317;     /* Header and darkest panels */
    --easy-card-background: #1e1f23;     /* Cards, forms, and boxes */
    --easy-raised-background: #292a2e;   /* Secondary buttons and controls */
    --easy-main-text: #e3e2e7;           /* Titles and important text */
    --easy-secondary-text: #b7b5b4;      /* Descriptions and quiet text */
    --easy-border-color: #a28d79;        /* Lines around cards and panels */
    --easy-read-color: #80d49b;          /* Green Read status */

    /* BLUE EXAMPLE:
       Change the first two settings above to:
       --easy-main-color: #28b8ff;
       --easy-light-highlight: #9fddff;
    */

    /* ========================================================================
       2. TEXT
       Increase a px number to make text larger.
    ======================================================================== */

    --easy-normal-text-size: 16px;
    --easy-normal-line-spacing: 1.6;
    --easy-home-title-smallest: 42px;
    --easy-home-title-largest: 78px;

    /* Font choices. You can use:
       "Source Serif 4", Georgia, serif
       "Space Grotesk", Arial, sans-serif
       "JetBrains Mono", monospace
    */

    --easy-normal-font: "Source Serif 4", Georgia, serif;
    --easy-title-font: "Space Grotesk", Arial, sans-serif;
    --easy-control-font: "JetBrains Mono", monospace;

    /* ========================================================================
       3. PAGE SIZE AND SPACING
    ======================================================================== */

    --easy-page-width: 1240px;           /* Try 1050px or 1440px */
    --easy-page-side-space: 64px;        /* Empty space beside desktop pages */
    --easy-phone-side-space: 32px;       /* Empty space beside phone pages */
    --easy-space-between-cards: 16px;
    --easy-card-inside-space: 20px;

    /* ========================================================================
       4. HEADER AND LOGO
    ======================================================================== */

    --easy-header-height: 82px;
    --easy-logo-size: 52px;
    --easy-phone-logo-size: 42px;

    /* ========================================================================
       5. HOMEPAGE
    ======================================================================== */

    --easy-hero-height: 620px;           /* Whole large homepage box */
    --easy-hero-picture-height: 520px;
    --easy-phone-hero-picture-height: 260px;
    --easy-hero-picture-brightness: 0.72; /* 0 = invisible, 1 = full strength */
    --easy-popup-picture-width: 150px;
    --easy-popup-picture-height: 160px;
    --easy-popup-speed: 180ms;           /* Bigger number = slower opening */

    /* ========================================================================
       6. STORIES PAGE
    ======================================================================== */

    --easy-story-columns: 3;             /* Cards in each desktop row */
    --easy-tablet-story-columns: 2;      /* Cards in each tablet row */
    --easy-thumbnail-shape: 16 / 10;     /* Use 1 / 1 for square pictures */
    --easy-card-hover-movement: -3px;    /* Use 0px to stop cards moving */
    --easy-picture-gray: 20%;            /* Use 0% for full color */

    /* ========================================================================
       7. BOXES, BUTTONS, AND FORMS
    ======================================================================== */

    --easy-box-corners: 0px;             /* Try 8px for rounded boxes */
    --easy-button-corners: 0px;          /* Try 8px for rounded buttons */
    --easy-form-width: 960px;
    --easy-message-box-height: 220px;

    /* Button shape:
       Keep the long polygon value for the cut sci-fi corner.
       Replace the complete value with none for a normal rectangle.
    */
    --easy-button-shape: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);

    /* ========================================================================
       8. READER
    ======================================================================== */

    --easy-reader-width: 1440px;
    --easy-reader-window-height: 75vh;   /* Try 85vh for a taller Reader */
    --easy-story-page-width: 720px;      /* Width of story paragraphs */
    --easy-story-line-spacing: 1.75;
    --easy-story-light-background: #f3eee6;
    --easy-story-light-text: #25221e;
    --easy-story-dark-background: #121317;
    --easy-story-dark-text: #e3e2e7;

    /* ========================================================================
       9. DECORATIVE EFFECTS
    ======================================================================== */

    --easy-scanline-strength: 0.22;      /* Use 0 to remove scanlines */
    --easy-background-grid-strength: 0.025; /* Use 0 to remove the grid */
    --easy-background-grid-size: 32px;
}

/* ============================================================================
   STOP EDITING HERE

   Everything below connects your easy settings to the website.
   You normally never need to change it.
============================================================================ */

:root {
    --void: var(--easy-page-background);
    --surface: var(--easy-dark-background);
    --panel-low: var(--easy-card-background);
    --panel: var(--easy-card-background);
    --panel-high: var(--easy-raised-background);
    --panel-bright: var(--easy-raised-background);
    --text: var(--easy-main-text);
    --muted: var(--easy-secondary-text);
    --soft: var(--easy-secondary-text);
    --line: var(--easy-border-color);
    --line-bright: var(--easy-border-color);
    --amber: var(--easy-main-color);
    --amber-light: var(--easy-light-highlight);
    --success: var(--easy-read-color);
    --max-width: var(--easy-page-width);
}

body {
    font-family: var(--easy-normal-font);
    font-size: var(--easy-normal-text-size);
    line-height: var(--easy-normal-line-spacing);
    background:
        linear-gradient(rgba(255, 159, 10, var(--easy-background-grid-strength)) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 159, 10, var(--easy-background-grid-strength)) 1px, transparent 1px),
        radial-gradient(circle at 50% -10%, #292315 0, transparent 34rem),
        var(--easy-page-background);
    background-size:
        var(--easy-background-grid-size) var(--easy-background-grid-size),
        var(--easy-background-grid-size) var(--easy-background-grid-size),
        auto,
        auto;
}

body::after {
    opacity: var(--easy-scanline-strength);
}

h1,
h2,
h3,
.brand-title,
.mission-title,
.about-panel .pull-quote {
    font-family: var(--easy-title-font);
}

.brand-studio,
.eyebrow,
.panel-label,
.status-item,
.field-note,
.meta,
.system-note,
.footer-label,
.site-nav a,
.nav-toggle,
.hero-motto,
.mission-number,
.mission-arrow,
.button,
button.button,
.sort-button,
.reader-control,
.episode-chip,
.read-status,
.loading-message,
.empty-state,
.episode-select,
label,
.footer-links a {
    font-family: var(--easy-control-font);
}

main {
    width: min(calc(100% - var(--easy-page-side-space)), var(--easy-page-width));
}

.site-header {
    min-height: var(--easy-header-height);
}

.brand-mark {
    width: var(--easy-logo-size);
    height: var(--easy-logo-size);
}

.hero {
    min-height: var(--easy-hero-height);
}

.hero-media {
    min-height: var(--easy-hero-picture-height);
}

.hero-media img {
    opacity: var(--easy-hero-picture-brightness);
}

h1 {
    font-size: clamp(
        var(--easy-home-title-smallest),
        7vw,
        var(--easy-home-title-largest)
    );
}

.entry-grid,
.stories-grid {
    gap: var(--easy-space-between-cards);
}

.mission-choice,
.panel,
.story-card,
.reader-shell,
.form-panel,
.about-panel {
    border-radius: var(--easy-box-corners);
}

.mission-preview {
    transition:
        grid-template-rows var(--easy-popup-speed) ease,
        border-color var(--easy-popup-speed) ease;
}

.mission-preview-inner {
    grid-template-columns: var(--easy-popup-picture-width) 1fr;
}

.mission-preview img {
    width: var(--easy-popup-picture-width);
    min-height: var(--easy-popup-picture-height);
}

.preview-copy,
.story-card-copy {
    padding: var(--easy-card-inside-space);
}

.button,
button.button {
    border-radius: var(--easy-button-corners);
    clip-path: var(--easy-button-shape);
}

.stories-grid {
    grid-template-columns: repeat(var(--easy-story-columns), minmax(0, 1fr));
}

.story-card-media {
    aspect-ratio: var(--easy-thumbnail-shape);
}

.story-card:hover {
    transform: translateY(var(--easy-card-hover-movement));
}

.story-card-media img {
    filter: grayscale(var(--easy-picture-gray)) contrast(1.15);
}

.reader-page {
    width: min(calc(100% - var(--easy-page-side-space)), var(--easy-reader-width));
}

.story-window {
    min-height: var(--easy-reader-window-height);
}

.form-page,
.about-page {
    max-width: var(--easy-form-width);
}

textarea {
    min-height: var(--easy-message-box-height);
}

/* These rules also customize story files that load customize.css. */
body:has(.episode) {
    color: var(--easy-story-light-text);
    background: var(--easy-story-light-background);
    line-height: var(--easy-story-line-spacing);
}

body[data-theme="dark"]:has(.episode) {
    color: var(--easy-story-dark-text);
    background: var(--easy-story-dark-background);
}

.episode {
    width: min(100%, var(--easy-story-page-width));
}

@media (max-width: 980px) {
    .stories-grid {
        grid-template-columns: repeat(var(--easy-tablet-story-columns), minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    main,
    .reader-page {
        width: min(calc(100% - var(--easy-phone-side-space)), var(--easy-page-width));
    }

    .brand-mark {
        width: var(--easy-phone-logo-size);
        height: var(--easy-phone-logo-size);
    }

    .hero-media {
        min-height: var(--easy-phone-hero-picture-height);
    }

    .entry-grid,
    .stories-grid {
        grid-template-columns: 1fr;
    }

    .mission-preview-inner {
        grid-template-columns: 1fr;
    }

    .mission-preview img {
        width: 100%;
    }
}