Save

CatherineLynwood/Controllers/DiscoveryController.cs

@@ -141,7 +141,7 @@ namespace CatherineLynwood.Controllers
         [Route("extras/soundtrack")]
         public async Task<IActionResult> Soundtrack()
         {
-            List<SoundtrackTrackModel> soundtrackTrackModels = await _dataAccess.GetSoundtrack();
+            List<SoundtrackTrackModel> soundtrackTrackModels = await _dataAccess.GetSoundtrack("Discovery");
             return View(soundtrackTrackModels);
         }
 

CatherineLynwood/Controllers/ReckoningController.cs

@@ -27,6 +27,29 @@ namespace CatherineLynwood.Controllers
             _country = country;
         }
 
+        [Route("/investigation-confirmation")]
+        public IActionResult InvestigationConfirmation()
+        {
+            return View();
+        }
+
+        [HttpPost]
+        [ValidateAntiForgeryToken]
+        public async Task<IActionResult> SubmitTheory(TheorySubmission model)
+        {
+            if (!ModelState.IsValid)
+            {
+                return View("Investigation", model);
+            }
+
+            await _dataAccess.SaveTheorySubmission(model);
+
+            // Optional: Temp message
+            TempData["Success"] = "Your theory has been submitted.";
+
+            return RedirectToAction("InvestigationConfirmation");
+        }
+
         [Route("")]
         public async Task<IActionResult> Index()
         {
@@ -107,8 +130,8 @@ namespace CatherineLynwood.Controllers
         public IActionResult Extras() => View();
 
         [BookAccess(1, 2)]
-        [Route("extras/epilogue")]
-        public IActionResult Epilogue() => View();
+        [Route("extras/investigation")]
+        public IActionResult Investigation() => View();
 
         [BookAccess(1, 2)]
         [Route("extras/scrap-book")]
@@ -126,7 +149,7 @@ namespace CatherineLynwood.Controllers
         [Route("extras/soundtrack")]
         public async Task<IActionResult> Soundtrack()
         {
-            List<SoundtrackTrackModel> soundtrackTrackModels = await _dataAccess.GetSoundtrack();
+            List<SoundtrackTrackModel> soundtrackTrackModels = await _dataAccess.GetSoundtrack("Reckoning");
             return View(soundtrackTrackModels);
         }
 

CatherineLynwood/Models/TheorySubmission.cs

@@ -0,0 +1,10 @@
+namespace CatherineLynwood.Models
+{
+    public class TheorySubmission
+    {
+        public string Suspect { get; set; }
+        public string Reason { get; set; }
+        public string EmailAddress { get; set; }
+        public bool MarketingOptIn { get; set; }
+    }
+}

CatherineLynwood/Services/DataAccess.cs

@@ -811,7 +811,7 @@ namespace CatherineLynwood.Services
             return reviews;
         }
 
-        public async Task<List<SoundtrackTrackModel>> GetSoundtrack()
+        public async Task<List<SoundtrackTrackModel>> GetSoundtrack(string title)
         {
             List<SoundtrackTrackModel> soundtrackTrackModels = new List<SoundtrackTrackModel>();
 
@@ -825,6 +825,7 @@ namespace CatherineLynwood.Services
                         cmd.Connection = conn;
                         cmd.CommandType = CommandType.StoredProcedure;
                         cmd.CommandText = "GetSoundtrack";
+                        cmd.Parameters.AddWithValue("@Title", title);
 
                         using (SqlDataReader rdr = await cmd.ExecuteReaderAsync())
                         {
@@ -1045,6 +1046,40 @@ namespace CatherineLynwood.Services
             return success;
         }
 
+        public async Task<bool> SaveTheorySubmission(TheorySubmission submission)
+        {
+            bool success = true;
+
+            using (SqlConnection conn = new SqlConnection(_connectionString))
+            {
+                using (SqlCommand cmd = new SqlCommand())
+                {
+                    try
+                    {
+                        await conn.OpenAsync();
+                        cmd.Connection = conn;
+                        cmd.CommandType = CommandType.StoredProcedure;
+                        cmd.CommandText = "SaveTheorySubmission";
+
+                        cmd.Parameters.AddWithValue("@Suspect", submission.Suspect ?? (object)DBNull.Value);
+                        cmd.Parameters.AddWithValue("@Reason", submission.Reason ?? (object)DBNull.Value);
+                        cmd.Parameters.AddWithValue("@EmailAddress", submission.EmailAddress ?? (object)DBNull.Value);
+                        cmd.Parameters.AddWithValue("@MarketingOptIn", submission.MarketingOptIn);
+                        cmd.Parameters.AddWithValue("@CreatedAt", DateTime.UtcNow);
+
+                        await cmd.ExecuteNonQueryAsync();
+                    }
+                    catch (Exception ex)
+                    {
+                        success = false;
+                        // optional: log ex
+                    }
+                }
+            }
+
+            return success;
+        }
+
         public async Task<bool> SaveContact(Contact contact, bool subscribe = false)
         {
             bool success = true;

CatherineLynwood/TagHelpers/ResponsiveImageTagHelper.cs

@@ -41,29 +41,52 @@ namespace CatherineLynwood.TagHelpers
 
         public override async Task ProcessAsync(TagHelperContext context, TagHelperOutput output)
         {
-            // Adjust for mobile display width if applicable
+            try
+            {
                 if (IsMobile(_httpContextAccessor.HttpContext.Request))
                 {
                     DisplayWidthPercentage = 100;
                 }
 
                 string rootPath = Path.Combine(Directory.GetCurrentDirectory(), _wwwRoot, "images", Source);
+
+                if (string.IsNullOrWhiteSpace(Source))
+                {
+                    RenderError(output, "responsive-image error: src is empty.");
+                    return;
+                }
+
+                if (!File.Exists(rootPath))
+                {
+                    RenderError(output, $"responsive-image error: source image not found: {rootPath}");
+                    return;
+                }
+
                 string directory = Path.GetDirectoryName(rootPath);
                 string fileName = Path.GetFileNameWithoutExtension(rootPath);
-            string extension = Path.GetExtension(rootPath);
+                string extension = Path.GetExtension(rootPath).ToLowerInvariant();
+
+                if (extension == ".gif")
+                {
+                    RenderError(output, $"responsive-image error: GIF files are not supported by this helper. Use a normal <img> tag for: {Source}");
+                    return;
+                }
 
                 string year = DateTime.Now.Year.ToString();
-            // Define paths for "webp" and "jpg" subfolders
                 string webpDirectory = Path.Combine(directory, "webp");
                 string jpgDirectory = Path.Combine(directory, "jpg");
                 string watermarkText = $"© Catherine Lynwood {year}";
 
-            // Ensure the subdirectories exist
                 Directory.CreateDirectory(webpDirectory);
                 Directory.CreateDirectory(jpgDirectory);
 
-            // Generate HTML for <picture> tag with WebP sources only
+                string sourceDirectoryUrl = Path.GetDirectoryName(Source)?.Replace("\\", "/") ?? "";
+                string webpUrlBase = string.IsNullOrWhiteSpace(sourceDirectoryUrl)
+                    ? "/images/webp"
+                    : $"/images/{sourceDirectoryUrl}/webp";
+
                 output.TagName = "picture";
+
                 foreach (string res in _resolutions)
                 {
                     int effectiveWidth = int.Parse(res) * DisplayWidthPercentage / 100;
@@ -71,42 +94,91 @@ namespace CatherineLynwood.TagHelpers
 
                     if (!File.Exists(webpPath))
                     {
-                    await CreateResizedImage(rootPath, webpPath, effectiveWidth, watermarkText, true); // WebP format
+                        try
+                        {
+                            await CreateResizedImage(rootPath, webpPath, effectiveWidth, watermarkText, true);
+                        }
+                        catch (IOException)
+                        {
+                            // Another request is probably generating it — safe to ignore
+                        }
                     }
 
                     output.Content.AppendHtml(
-                    $"<source srcset='/images/webp/{fileName}-{effectiveWidth}.webp' media='(min-width: {res}px)'>");
+                        $"<source srcset='{webpUrlBase}/{fileName}-{effectiveWidth}.webp' media='(min-width: {res}px)'>");
                 }
 
                 string webpPathFallback = Path.Combine(webpDirectory, $"{fileName}-400.webp");
 
                 if (!File.Exists(webpPathFallback))
                 {
-                await CreateResizedImage(rootPath, webpPathFallback, 400, watermarkText, true); // WebP format
+                    await CreateResizedImage(rootPath, webpPathFallback, 400, watermarkText, true);
                 }
 
-            // Generate the 400px JPEG for RSS feed or other uses (without adding to the <picture> element)
                 string jpgFallbackPath = Path.Combine(jpgDirectory, $"{fileName}-400.jpg");
+
                 if (!File.Exists(jpgFallbackPath))
                 {
-                await CreateResizedImage(rootPath, jpgFallbackPath, 400, watermarkText, false); // JPEG format
+                    await CreateResizedImage(rootPath, jpgFallbackPath, 400, watermarkText, false);
                 }
 
-            // Add the default WebP fallback in the <img> tag (JPEG is not included in HTML)
                 string noIndexAttr = NoIndex ? " data-nosnippet" : "";
                 output.Content.AppendHtml(
-                $"<img src='/images/webp/{fileName}-400.webp' class='{CssClass}' alt='{AltText}'{noIndexAttr}>");
-
+                    $"<img src='{webpUrlBase}/{fileName}-400.webp' class='{CssClass}' alt='{AltText}'{noIndexAttr}>");
+            }
+            catch (Exception ex)
+            {
+                RenderError(output, $"responsive-image error for '{Source}': {ex.Message}");
+            }
         }
 
+        private void RenderError(TagHelperOutput output, string message)
+        {
+            output.TagName = "div";
+            output.Attributes.SetAttribute("style",
+                "background:#5b1f1f;color:#fff4dc;border:2px solid #d3a45f;padding:12px;margin:12px 0;border-radius:8px;font-family:monospace;white-space:pre-wrap;");
+
+            output.Content.SetHtmlContent(System.Net.WebUtility.HtmlEncode(message));
+        }
+
+        private Font? GetWatermarkFont()
+        {
+            string[] preferredFonts =
+            {
+                "Arial",
+                "DejaVu Sans",
+                "Liberation Sans",
+                "Noto Sans",
+                "Ubuntu"
+            };
+
+            foreach (string fontName in preferredFonts)
+            {
+                if (SystemFonts.TryGet(fontName, out FontFamily family))
+                {
+                    return family.CreateFont(12);
+                }
+            }
+
+            return null;
+        }
 
         private async Task CreateResizedImage(string originalPath, string outputPath, int width, string watermarkText, bool isWebP)
         {
             using (var image = await Image.LoadAsync(originalPath))
             {
-                image.Mutate(x => x
-                    .Resize(width, 0)
-                    .DrawText(watermarkText, SystemFonts.CreateFont("Arial", 12), Color.White, new PointF(30, image.Height - 20)));
+                int resizeWidth = Math.Min(width, image.Width);
+                Font? watermarkFont = GetWatermarkFont();
+
+                image.Mutate(x =>
+                {
+                    x.Resize(resizeWidth, 0);
+
+                    if (watermarkFont != null)
+                    {
+                        x.DrawText(watermarkText, watermarkFont, Color.White, new PointF(30, image.Height - 20));
+                    }
+                });
 
                 if (isWebP)
                 {

CatherineLynwood/Views/Reckoning/Extras.cshtml

@@ -3,6 +3,8 @@
     int? accessLevel = Context.Session.GetInt32("BookAccessLevel");
     int? accessBook = Context.Session.GetInt32("BookAccessMax");
 
+    // For Reckoning, keep access open for now.
+    accessLevel = accessLevel ?? 1;
 }
 
 <div class="row">
@@ -10,8 +12,8 @@
         <nav aria-label="breadcrumb">
             <ol class="breadcrumb">
                 <li class="breadcrumb-item"><a asp-controller="Home" asp-action="Index">Home</a></li>
-                <li class="breadcrumb-item active" aria-current="page"><a asp-controller="TheAlphaFlame" asp-action="Index">The Alpha Flame</a></li>
-                <li class="breadcrumb-item active" aria-current="page"><a asp-controller="Reckoning" asp-action="Index">Reckoning</a></li>
+                <li class="breadcrumb-item"><a asp-controller="TheAlphaFlame" asp-action="Index">The Alpha Flame</a></li>
+                <li class="breadcrumb-item"><a asp-controller="Reckoning" asp-action="Index">Reckoning</a></li>
                 <li class="breadcrumb-item active" aria-current="page">Extras</li>
             </ol>
         </nav>
@@ -19,54 +21,60 @@
 </div>
 
 <div class="container mt-5">
-    <h1 class="extras-header">The Alpha Flame Reckoning Exclusive Extras</h1>
+    <h1 class="extras-header">The Alpha Flame: Reckoning Extras</h1>
+
+    <p class="extras-intro">
+        You’ve finished the book. Now step a little further into the world behind it.
+        Some pieces explain nothing. Some pieces explain more than they should.
+    </p>
+
     <div class="extras-grid mt-4">
-        @if (accessLevel >= 1)
-        {
-            <div class="card extra-card">
+
+        <div class="card extra-card featured-extra">
             <div class="card-body">
-                    <h5 class="card-title">Epilogue</h5>
-                    <p class="card-text">Immerse yourself in the Eplilogue to The Alpha Flame: Discovery. Join the team as they relax for a quite drink at the Barnt Green Inn</p>
-                    <a asp-action="Epilogue" class="btn btn-dark btn-sm">Read or Listen</a>
+                <h5 class="card-title">Recovered Evidence</h5>
+                <p class="card-text">
+                    Listen to recovered tapes, examine fragments, and decide who may not be who they appear to be.
+                    Submit your theory before the truth comes out in <em>Redemption</em>.
+                </p>
+                <a asp-action="Investigation" class="btn btn-dark btn-sm">Open Case File</a>
             </div>
         </div>
-        }
-        @if (accessLevel >= 2)
-        {
+
         <div class="card extra-card">
             <div class="card-body">
-                    <h5 class="card-title">Discovery Scrap Book</h5>
-                    <p class="card-text">Take a look at my image scrapbook for The Alpha Flame: Discovery. View the images I used for inspiration when writing the various scenes within the book.</p>
+                <h5 class="card-title">Reckoning Soundtrack</h5>
+                <p class="card-text">
+                    Listen to original songs inspired by key moments from <em>The Alpha Flame: Reckoning</em>.
+                    Grief, secrets, fire, and a few things best left in the dark.
+                </p>
+                <a asp-action="Soundtrack" class="btn btn-dark btn-sm">Listen to Soundtrack</a>
+            </div>
+        </div>
+
+        <div class="card extra-card">
+            <div class="card-body">
+                <h5 class="card-title">Reckoning Scrapbook</h5>
+                <p class="card-text">
+                    Browse images, locations, textures, and visual inspiration from the world of <em>Reckoning</em>.
+                </p>
                 <a asp-action="ScrapBook" class="btn btn-dark btn-sm">View Scrapbook</a>
             </div>
         </div>
 
-            <div class="card extra-card">
-                <div class="card-body">
-                    <h5 class="card-title">Discovery Soundtrack</h5>
-                    <p class="card-text">Have a listen to The Alpha Flame soundtrack. A selection of original songs written by me and put to music.</p>
-                    <a asp-action="Soundtrack" class="btn btn-dark btn-sm">Soundtrack</a>
-                </div>
-            </div>
-        }
-        @if (accessLevel >= 3)
+@*         @if (accessLevel >= 3)
         {
             <div class="card extra-card">
                 <div class="card-body">
-                    <h5 class="card-title">Listen to The Alpha Flame: Discovery</h5>
-                    <p class="card-text">Because you've purchased a premium physical copy of The Alpha Flame: Discovery, for a limited time this entitles you to listen to the audio version with no extra charge.</p>
+                    <h5 class="card-title">Listen to The Alpha Flame: Reckoning</h5>
+                    <p class="card-text">
+                        Listen to the AI-read audio version of <em>The Alpha Flame: Reckoning</em>.
+                    </p>
                     <a asp-action="Listen" class="btn btn-dark btn-sm">Listen to the Book</a>
                 </div>
             </div>
+        } *@
 
-            <div class="card extra-card">
-                <div class="card-body">
-                    <h5 class="card-title">Scrapbook: Maggie’s Designs</h5>
-                    <p class="card-text">Flip through Maggie’s sketches, fashion notes, and photos from her original designs – including the infamous red skirt.</p>
-                    <a asp-action="MaggiesDesigns" class="btn btn-dark btn-sm">View Scrapbook</a>
-                </div>
-            </div>
-        }
     </div>
 </div>
 
@@ -75,18 +83,49 @@
         .extras-header {
             text-align: center;
             margin-top: 3rem;
-            margin-bottom: 2rem;
+            margin-bottom: 1rem;
+        }
+
+        .extras-intro {
+            max-width: 760px;
+            margin: 0 auto 2rem auto;
+            text-align: center;
+            color: #555;
+            font-size: 1.05rem;
+            line-height: 1.6;
+        }
+
+        .extras-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+            gap: 1.5rem;
         }
 
         .extra-card {
             border: none;
             border-radius: 1rem;
             box-shadow: 0 0 15px rgba(0,0,0,0.1);
-            transition: transform 0.2s ease;
+            transition: transform 0.2s ease, box-shadow 0.2s ease;
         }
 
             .extra-card:hover {
                 transform: translateY(-5px);
+                box-shadow: 0 0 22px rgba(0,0,0,0.16);
+            }
+
+        .featured-extra {
+            background: linear-gradient(135deg, #1e1b18, #3a3028);
+            color: #f7efe2;
+        }
+
+            .featured-extra .card-text {
+                color: #eadfcd;
+            }
+
+            .featured-extra .btn {
+                background: #f7efe2;
+                color: #1e1b18;
+                border: none;
             }
 
         .card-title {
@@ -97,17 +136,5 @@
         .card-text {
             font-size: 0.95rem;
         }
-
-        .extras-grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-            gap: 1.5rem;
-        }
-
-        .access-label {
-            font-size: 0.8rem;
-            font-style: italic;
-            color: #888;
-        }
     </style>
 }

CatherineLynwood/Views/Reckoning/Index.cshtml

@@ -54,6 +54,14 @@
                                             <partial name="_ReckoningEvidence" model="Model"></partial>
                                         </div>
 
+                                        <div class="casefile-panel" data-tab="maps">
+                                            <partial name="_ReckoningMaps" model="Model"></partial>
+                                        </div>
+
+                                        <div class="casefile-panel" data-tab="chapters">
+                                            <partial name="_ReckoningChapters" model="Model"></partial>
+                                        </div>
+
                                         <div class="casefile-panel" data-tab="notes">
                                             <partial name="_ReckoningReview" model="Model"></partial>
                                         </div>
@@ -72,6 +80,8 @@
                                     <button type="button" class="casefile-tab active" data-tab="summary">Summary</button>
                                     <button type="button" class="casefile-tab" data-tab="subjects">Subjects</button>
                                     <button type="button" class="casefile-tab" data-tab="evidence">Evidence</button>
+                                    <button type="button" class="casefile-tab" data-tab="maps">Maps</button>
+                                    <button type="button" class="casefile-tab" data-tab="chapters">Chapters</button>
                                     <button type="button" class="casefile-tab" data-tab="notes">Review</button>
                                     <button type="button" class="casefile-tab" data-tab="buy">Purchase</button>
                                     <button type="button" class="casefile-tab restricted" data-tab="restricted">Restricted</button>

CatherineLynwood/Views/Reckoning/IndexMobile.cshtml

@@ -77,6 +77,13 @@
             </div>
         </section>
 
+        <section id="evidence" class="reckoning-mobile-section">
+            <div class="reckoning-mobile-tab reckoning-tab-maps">Maps</div>
+            <div class="reckoning-mobile-paper">
+                @await Html.PartialAsync("_ReckoningMaps", Model)
+            </div>
+        </section>
+
         <section id="review" class="reckoning-mobile-section">
             <div class="reckoning-mobile-tab reckoning-tab-review">Review</div>
             <div class="reckoning-mobile-paper">

CatherineLynwood/Views/Reckoning/Investigation.cshtml

@@ -0,0 +1,546 @@
+@{
+    ViewData["Title"] = "Recovered Evidence";
+}
+
+<div class="container reckoning-evidence-page my-5">
+    <div class="row">
+        <div class="col-12">
+            <nav aria-label="breadcrumb">
+                <ol class="breadcrumb">
+                    <li class="breadcrumb-item"><a asp-controller="Home" asp-action="Index">Home</a></li>
+                    <li class="breadcrumb-item"><a asp-controller="TheAlphaFlame" asp-action="Index">The Alpha Flame</a></li>
+                    <li class="breadcrumb-item"><a asp-controller="Reckoning" asp-action="Index">Reckoning</a></li>
+                    <li class="breadcrumb-item"><a asp-controller="Reckoning" asp-action="Extras">Extras</a></li>
+                    <li class="breadcrumb-item active text-white" aria-current="page">Investigation</li>
+                </ol>
+            </nav>
+        </div>
+    </div>
+    <section class="evidence-hero">
+        <div class="evidence-hero-inner">
+            <p class="case-label">Restricted Companion Material</p>
+
+            <h1 class="evidence-title">Recovered Evidence</h1>
+
+            <p class="evidence-lead">
+                Some things in <em>The Alpha Flame: Reckoning</em> were hidden in plain sight.
+                A line dismissed too quickly. A voice half-heard. A question no one wanted to answer.
+            </p>
+
+            <p class="evidence-copy">
+                Below are fragments recovered from the world behind the book. Some are useful.
+                Some are distractions. Choose the three pieces that tell the truth, then tell me who
+                you think is not who they appear to be.
+            </p>
+
+            <p class="evidence-warning">
+                Spoilers ahead. This section is intended for readers who have finished <em>Reckoning</em>.
+            </p>
+        </div>
+    </section>
+
+    <div class="evidence-grid">
+
+        <div class="evidence-card tape-card" data-evidence-id="tape1">
+            <h3>Tape One</h3>
+            <audio controls preload="metadata">
+                <source src="/audio/investigation/tape-1.mp3" type="audio/mpeg" />
+            </audio>
+            <label>
+                <input type="checkbox" class="evidence-check" value="tape1" />
+                Select evidence
+            </label>
+        </div>
+
+        <div class="evidence-card tape-card" data-evidence-id="tape2">
+            <h3>Tape Two</h3>
+            <audio controls preload="metadata">
+                <source src="/audio/investigation/tape-2.mp3" type="audio/mpeg" />
+            </audio>
+            <label>
+                <input type="checkbox" class="evidence-check" value="tape2" />
+                Select evidence
+            </label>
+        </div>
+
+        <div class="evidence-card  tape-card" data-evidence-id="tape3">
+            <h3>Tape Three</h3>
+            <audio controls preload="metadata">
+                <source src="/audio/investigation/tape-3.mp3" type="audio/mpeg" />
+            </audio>
+            <label>
+                <input type="checkbox" class="evidence-check" value="tape3" />
+                Select evidence
+            </label>
+        </div>
+
+        <div class="evidence-card" data-evidence-id="poem">
+            <h3>Recovered Verse</h3>
+            <responsive-image src="poem.png" class="evidence-img" alt="Recovered poem" display-width-percentage="50"></responsive-image>
+            <label>
+                <input type="checkbox" class="evidence-check" value="poem" />
+                Select evidence
+            </label>
+        </div>
+
+        <div class="evidence-card" data-evidence-id="notes">
+            <h3>Handwritten Notes</h3>
+            <responsive-image src="hand-written-note.png" class="evidence-img" alt="Hand written note" display-width-percentage="50"></responsive-image>
+            <label>
+                <input type="checkbox" class="evidence-check" value="notes" />
+                Select evidence
+            </label>
+        </div>
+
+        <div class="evidence-card" data-evidence-id="ledger">
+            <h3>Ledger Page</h3>
+            <responsive-image src="ledger.png" class="evidence-img" alt="Ledger" display-width-percentage="50"></responsive-image>
+            <label>
+                <input type="checkbox" class="evidence-check" value="ledger" />
+                Select evidence
+            </label>
+        </div>
+
+    </div>
+
+    <div class="evidence-actions">
+        <button type="button" id="checkEvidenceBtn" class="btn btn-dark">
+            Check Evidence
+        </button>
+        <p id="evidenceMessage" class="evidence-message"></p>
+    </div>
+
+    <section id="theorySection" class="theory-section d-none">
+        <h2>Someone is not who they appear to be.</h2>
+
+        <p class="theory-hint">
+            The question was asked once... and no one listened.
+        </p>
+
+        <form asp-action="SubmitTheory" method="post" class="theory-form">
+            @Html.AntiForgeryToken()
+
+            <div class="mb-4">
+                <label class="form-label">Who do you think it is?</label>
+
+                <div class="theory-options">
+                    <label><input type="radio" name="Suspect" value="Barbara" required /> Barbara</label>
+                    <label><input type="radio" name="Suspect" value="Dylan" /> Dylan</label>
+                    <label><input type="radio" name="Suspect" value="Gareth" /> Gareth</label>
+                    <label><input type="radio" name="Suspect" value="Graham" /> Graham</label>
+                    <label><input type="radio" name="Suspect" value="Rebecca" /> Rebecca</label>
+                    <label><input type="radio" name="Suspect" value="Rick" /> Rick</label>
+                    <label><input type="radio" name="Suspect" value="Simon" /> Simon</label>
+                    <label><input type="radio" name="Suspect" value="Sophie" /> Sophie</label>
+                    <label><input type="radio" name="Suspect" value="Yvonne" /> Yvonne</label>
+                    <label><input type="radio" name="Suspect" value="Other" /> Someone else</label>
+                </div>
+            </div>
+
+            <div class="mb-4">
+                <label for="Reason" class="form-label">What made you think that?</label>
+                <textarea id="Reason" name="Reason" class="form-control" rows="5" required></textarea>
+            </div>
+
+            <div class="mb-4">
+                <label for="EmailAddress" class="form-label">Email address</label>
+                <input id="EmailAddress" name="EmailAddress" type="email" class="form-control" required />
+                <small class="form-text">
+                    Needed so I can contact winners when Redemption is released.
+                </small>
+            </div>
+
+            <div class="form-check mb-4">
+                <input id="MarketingOptIn" name="MarketingOptIn" type="checkbox" class="form-check-input" value="true" />
+                <label for="MarketingOptIn" class="form-check-label">
+                    I would like updates about future releases and extras.
+                </label>
+            </div>
+
+            <button type="submit" class="btn btn-dark">
+                Submit Theory
+            </button>
+        </form>
+    </section>
+
+</div>
+
+@section Meta {
+    <style>
+        .reckoning-evidence-page {
+            max-width: 1180px;
+            color: #2b2118;
+        }
+
+        .evidence-title {
+            text-align: center;
+            font-weight: 800;
+            margin-bottom: 1rem;
+            color: #ffffff;
+            letter-spacing: .03em;
+        }
+
+        .evidence-intro {
+            max-width: 760px;
+            margin: 0 auto 2rem auto;
+            text-align: center;
+            color: #ffffff;
+            font-size: 1.05rem;
+            line-height: 1.6;
+        }
+
+        .evidence-grid {
+            display: grid;
+            grid-template-columns: repeat(3, minmax(260px, 1fr));
+            gap: 1.5rem;
+        }
+
+        @@media (max-width: 991px) {
+            .evidence-grid {
+                grid-template-columns: repeat(2, minmax(240px, 1fr));
+            }
+        }
+
+        @@media (max-width: 575px) {
+            .evidence-grid {
+                grid-template-columns: 1fr;
+            }
+        }
+
+        .evidence-card {
+            background: #f3ead8;
+            color: #2b2118;
+            border: 1px solid #d3c1a2;
+            border-radius: .75rem;
+            padding: 1.25rem;
+            box-shadow: 0 8px 18px rgba(40, 28, 18, 0.18);
+            transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
+            position: relative;
+        }
+
+            .evidence-card::before {
+                content: "";
+                position: absolute;
+                inset: 0;
+                border-radius: .75rem;
+                background: linear-gradient(135deg, rgba(255,255,255,.35), transparent 35%), radial-gradient(circle at top right, rgba(92,64,38,.08), transparent 45%);
+                pointer-events: none;
+            }
+
+            .evidence-card:hover {
+                transform: translateY(-4px);
+                box-shadow: 0 12px 26px rgba(40, 28, 18, 0.25);
+                border-color: #aa8152;
+            }
+
+            .evidence-card.selected {
+                outline: 3px solid #8b5e34;
+                box-shadow: 0 0 0 5px rgba(139, 94, 52, .18), 0 12px 26px rgba(40, 28, 18, 0.25);
+            }
+
+            .evidence-card h3 {
+                font-size: 1.15rem;
+                font-weight: 800;
+                margin-bottom: 1rem;
+                color: #3b2a1c;
+                text-transform: uppercase;
+                letter-spacing: .04em;
+            }
+
+            .evidence-card audio {
+                width: 100%;
+                margin-bottom: 1rem;
+            }
+
+            .evidence-card.tape-card {
+                min-height: 360px;
+                background: linear-gradient(rgba(35, 25, 18, .18), rgba(35, 25, 18, .7)), url('/images/cassette-bg.png') center / cover no-repeat;
+                color: #f7efe2;
+                display: flex;
+                flex-direction: column;
+                justify-content: space-between;
+            }
+
+                .evidence-card.tape-card h3,
+                .evidence-card.tape-card label {
+                    color: #f7efe2;
+                    text-shadow: 0 1px 2px rgba(0,0,0,.8);
+                }
+
+                .evidence-card.tape-card audio {
+                    margin-top: auto;
+                    margin-bottom: 1rem;
+                    filter: sepia(.25) contrast(1.05);
+                }
+
+                .evidence-card.tape-card::before {
+                    background: radial-gradient(circle at center, rgba(255,255,255,.08), transparent 55%), linear-gradient(135deg, rgba(255,255,255,.12), transparent 45%);
+                }
+
+        .evidence-img {
+            width: 100%;
+            height: 230px;
+            object-fit: cover;
+            border-radius: .45rem;
+            margin-bottom: 1rem;
+            border: 6px solid #efe2c7;
+            box-shadow: 0 6px 14px rgba(0,0,0,.22);
+            background: #e6d4b4;
+        }
+
+        .evidence-card label {
+            display: flex;
+            gap: .55rem;
+            align-items: center;
+            font-weight: 700;
+            cursor: pointer;
+            color: #3b2a1c;
+            position: relative;
+            z-index: 1;
+        }
+
+        .evidence-card input[type="checkbox"] {
+            accent-color: #8b5e34;
+        }
+
+        .evidence-actions {
+            text-align: center;
+            margin-top: 2rem;
+        }
+
+        .evidence-message {
+            display: block;
+            width: fit-content;
+            max-width: 720px;
+            margin: 1.25rem auto 0 auto;
+            padding: .85rem 1.2rem;
+            font-weight: 800;
+            color: #fff4dc;
+            background: rgba(43, 33, 24, 0.95);
+            border: 1px solid #d3a45f;
+            border-radius: .6rem;
+            box-shadow: 0 8px 24px rgba(0,0,0,.35);
+            text-shadow: 0 1px 2px rgba(0,0,0,.8);
+        }
+
+        .evidence-message {
+            opacity: 0;
+            transform: translateY(6px);
+            transition: all .25s ease;
+        }
+
+            .evidence-message:not(:empty) {
+                opacity: 1;
+                transform: translateY(0);
+            }
+
+            .evidence-message:empty {
+                display: none;
+            }
+
+        .theory-section {
+            margin-top: 3rem;
+            padding: 2rem;
+            border-radius: .75rem;
+            background: #2b2118;
+            color: #f3ead8;
+            border: 1px solid #7d5a39;
+            box-shadow: 0 14px 35px rgba(0,0,0,0.28);
+        }
+
+            .theory-section h2 {
+                font-weight: 800;
+                margin-bottom: 1rem;
+                color: #fff4dc;
+            }
+
+        .theory-hint {
+            font-size: 1.1rem;
+            color: #d9c29e;
+            margin-bottom: 2rem;
+            font-style: italic;
+        }
+
+        .theory-options {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+            gap: .75rem;
+        }
+
+            .theory-options label {
+                background: #3a2b20;
+                border: 1px solid #7d5a39;
+                color: #f3ead8;
+                padding: .75rem;
+                border-radius: .5rem;
+                cursor: pointer;
+            }
+
+                .theory-options label:hover {
+                    background: #463426;
+                }
+
+            .theory-options input[type="radio"],
+            .theory-form input[type="checkbox"] {
+                accent-color: #d3a45f;
+            }
+
+        .theory-form .form-control {
+            border-radius: .5rem;
+            border-color: #c8b18e;
+            background: #fffaf0;
+            color: #2b2118;
+        }
+
+        .theory-form .form-text {
+            color: #d6c7b5;
+        }
+
+        .btn-dark {
+            background: #2b2118;
+            border-color: #2b2118;
+        }
+
+            .btn-dark:hover {
+                background: #5b3a24;
+                border-color: #5b3a24;
+            }
+
+        .d-none {
+            display: none !important;
+        }
+
+        .evidence-hero {
+            max-width: 920px;
+            margin: 0 auto 2.5rem auto;
+            padding: 1.5rem;
+            border-radius: 1.1rem;
+            background: linear-gradient(rgba(30, 24, 18, .86), rgba(30, 24, 18, .92)), radial-gradient(circle at top left, rgba(211, 164, 95, .25), transparent 45%);
+            border: 1px solid rgba(211, 164, 95, .55);
+            box-shadow: 0 18px 45px rgba(0,0,0,.35);
+        }
+
+        .evidence-hero-inner {
+            padding: 2rem;
+            border: 1px solid rgba(243, 234, 216, .22);
+            border-radius: .85rem;
+            background: rgba(0,0,0,.16);
+            text-align: center;
+        }
+
+        .case-label {
+            display: inline-block;
+            margin-bottom: .85rem;
+            padding: .35rem .75rem;
+            border: 1px solid rgba(211, 164, 95, .8);
+            color: #d3a45f;
+            text-transform: uppercase;
+            letter-spacing: .12em;
+            font-size: .75rem;
+            font-weight: 800;
+        }
+
+        .evidence-title {
+            color: #fff4dc;
+            font-size: clamp(2rem, 4vw, 3.25rem);
+            margin-bottom: 1rem;
+            text-shadow: 0 3px 10px rgba(0,0,0,.75);
+        }
+
+        .evidence-lead {
+            color: #f3ead8;
+            font-size: 1.18rem;
+            line-height: 1.65;
+            max-width: 760px;
+            margin: 0 auto 1rem auto;
+        }
+
+        .evidence-copy {
+            color: #dbc8aa;
+            font-size: 1rem;
+            line-height: 1.6;
+            max-width: 760px;
+            margin: 0 auto 1.25rem auto;
+        }
+
+        .evidence-warning {
+            display: inline-block;
+            margin: .5rem auto 0 auto;
+            padding: .55rem .85rem;
+            background: rgba(91, 36, 31, .72);
+            border: 1px solid rgba(255, 210, 170, .35);
+            border-radius: .5rem;
+            color: #ffe6cf;
+            font-size: .92rem;
+            font-weight: 700;
+        }
+    </style>
+
+    <script>
+        document.addEventListener("DOMContentLoaded", function () {
+            const correctEvidence = ["tape1", "poem", "notes"];
+            const checks = Array.from(document.querySelectorAll(".evidence-check"));
+            const button = document.getElementById("checkEvidenceBtn");
+            const message = document.getElementById("evidenceMessage");
+            const theorySection = document.getElementById("theorySection");
+
+            function updateCards() {
+                checks.forEach(check => {
+                    const card = check.closest(".evidence-card");
+                    card.classList.toggle("selected", check.checked);
+                });
+            }
+
+            checks.forEach(check => {
+                check.addEventListener("change", function () {
+                    const selected = checks.filter(c => c.checked);
+
+                    if (selected.length > 3) {
+                        check.checked = false;
+                        message.textContent = "Choose only three pieces.";
+                    } else {
+                        message.textContent = "";
+                    }
+
+                    updateCards();
+                });
+            });
+
+            button.addEventListener("click", function () {
+                const selected = checks
+                    .filter(c => c.checked)
+                    .map(c => c.value);
+
+                if (selected.length !== 3) {
+                    message.textContent = "Choose exactly three pieces of evidence.";
+                    return;
+                }
+
+                const matched = selected.filter(x => correctEvidence.includes(x)).length;
+                const allCorrect = correctEvidence.every(x => selected.includes(x));
+
+                if (allCorrect) {
+                    message.textContent = "Now you’re seeing it the right way.";
+                    button.classList.add("d-none");
+
+                    setTimeout(() => {
+                        theorySection.classList.remove("d-none");
+                    }, 900);
+
+                    setTimeout(() => {
+                        theorySection.scrollIntoView({ behavior: "smooth", block: "start" });
+                    }, 1700);
+
+                    return;
+                }
+
+                if (matched === 2) {
+                    message.textContent = "Close... but something doesn’t belong.";
+                    return;
+                }
+
+                message.textContent = "You’re choosing what stands out... not what matters.";
+            });
+        });
+    </script>
+}

CatherineLynwood/Views/Reckoning/InvestigationConfirmation.cshtml

@@ -0,0 +1,130 @@
+@{
+    ViewData["Title"] = "Theory Submitted";
+}
+
+<div class="container confirmation-page my-5">
+
+    <div class="confirmation-card">
+        <div class="confirmation-inner">
+
+            <p class="case-label">Submission Received</p>
+
+            <h1 class="confirmation-title">
+                Some saw it early.<br />
+                Most didn’t.
+            </h1>
+
+            <p class="confirmation-copy">
+                Your theory has been recorded.
+                When the truth is revealed in <em>The Alpha Flame: Redemption</em>,
+                we’ll find out who was paying attention… and who wasn’t.
+            </p>
+
+            <p class="confirmation-sub">
+                If you’re right, you’ll know.
+            </p>
+
+            <p class="confirmation-sub">
+                Keep your answer in mind. You’ll want to remember it.
+            </p>
+
+            <div class="confirmation-actions mt-4">
+                <a asp-controller="Reckoning" asp-action="Extras" class="btn btn-dark">
+                    Back to Extras
+                </a>
+
+                <a asp-controller="Reckoning" asp-action="Index" class="btn btn-outline-light">
+                    Back to Reckoning
+                </a>
+            </div>
+
+        </div>
+    </div>
+
+</div>
+
+@section Meta {
+    <style>
+        .confirmation-page {
+            max-width: 900px;
+        }
+
+        .confirmation-card {
+            border-radius: 1.2rem;
+            background: linear-gradient(rgba(30, 24, 18, .88), rgba(30, 24, 18, .94)), radial-gradient(circle at top left, rgba(211,164,95,.25), transparent 45%);
+            border: 1px solid rgba(211,164,95,.6);
+            box-shadow: 0 20px 50px rgba(0,0,0,.4);
+            padding: 2rem;
+        }
+
+        .confirmation-inner {
+            border: 1px solid rgba(243,234,216,.25);
+            border-radius: .9rem;
+            padding: 2.5rem;
+            text-align: center;
+            background: rgba(0,0,0,.2);
+        }
+
+        .case-label {
+            display: inline-block;
+            margin-bottom: 1rem;
+            padding: .4rem .8rem;
+            border: 1px solid rgba(211,164,95,.8);
+            color: #d3a45f;
+            text-transform: uppercase;
+            letter-spacing: .12em;
+            font-size: .75rem;
+            font-weight: 800;
+        }
+
+        .confirmation-title {
+            font-size: clamp(2rem, 4vw, 3rem);
+            font-weight: 900;
+            color: #fff4dc;
+            margin-bottom: 1.5rem;
+            text-shadow: 0 3px 12px rgba(0,0,0,.8);
+        }
+
+        .confirmation-copy {
+            color: #f3ead8;
+            font-size: 1.1rem;
+            line-height: 1.7;
+            max-width: 650px;
+            margin: 0 auto 1.5rem auto;
+        }
+
+        .confirmation-sub {
+            color: #d3a45f;
+            font-size: 1rem;
+            font-style: italic;
+            margin-bottom: 2rem;
+        }
+
+        .confirmation-actions {
+            display: flex;
+            justify-content: center;
+            gap: 1rem;
+            flex-wrap: wrap;
+        }
+
+        .btn-dark {
+            background: #2b2118;
+            border-color: #2b2118;
+        }
+
+            .btn-dark:hover {
+                background: #5b3a24;
+                border-color: #5b3a24;
+            }
+
+        .btn-outline-light {
+            border-color: #d3a45f;
+            color: #f3ead8;
+        }
+
+            .btn-outline-light:hover {
+                background: #d3a45f;
+                color: #2b2118;
+            }
+    </style>
+}

CatherineLynwood/Views/Reckoning/ScrapBook.cshtml

@@ -1,198 +1,255 @@
 @{
-    ViewData["Title"] = "The Alpha Flame: Discovery Scrap Book";
+    ViewData["Title"] = "The Alpha Flame: Reckoning Scrapbook";
 }
+
 <div class="row">
     <div class="col-12">
         <nav aria-label="breadcrumb">
             <ol class="breadcrumb">
                 <li class="breadcrumb-item"><a asp-controller="Home" asp-action="Index">Home</a></li>
                 <li class="breadcrumb-item"><a asp-controller="TheAlphaFlame" asp-action="Index">The Alpha Flame</a></li>
-                <li class="breadcrumb-item"><a asp-controller="Discovery" asp-action="Index">Discovery</a></li>
-                <li class="breadcrumb-item"><a asp-controller="Discovery" asp-action="Extras">Extras</a></li>
-                <li class="breadcrumb-item active" aria-current="page">Discovery Scrap Book</li>
+                <li class="breadcrumb-item"><a asp-controller="Reckoning" asp-action="Index">Reckoning</a></li>
+                <li class="breadcrumb-item"><a asp-controller="Reckoning" asp-action="Extras">Extras</a></li>
+                <li class="breadcrumb-item active" aria-current="page">Reckoning Scrapbook</li>
             </ol>
         </nav>
     </div>
 </div>
 
-<div class="container">
-    <h1 class="mb-5 text-center">Discover Scrapbook</h1>
-    <p>
-        On this page I've included some of the images that helped inspire me to write The Alpha Flame: Discovery.
-    </p>
-    <p>
-        Some of them are fictional, generated by AI, others are real, both recent and archive photos.
-    </p>
-    <p>
-        I find that when I'm writing I like to imagine the scene. So having a visual guide helps me tremendously.
-        So I might, for example, ask AI to generate an image of a luxurious restaraunt. The I would look at the result
-        and tweak it, until what I was looking at matches what was in my imagination. I also find it useful to do the reverse.
-        I might write a description of a particular location, Beth's flat was one of them, and then feed that into AI to see
-        if it generated what I'd described. This was really useful because it helped me work out whether there was enough detail.
-        My thoughts were that if AI can draw what I've described, then I'm sure you as a reader will be able to imagine something
-        similar. Hopefully it's worked.
-    </p>
+<div class="container scrapbook-page">
+    <h1 class="mb-4 text-center">Reckoning Scrapbook</h1>
+
+    <div class="scrapbook-intro">
+        <p>
+            Here are some of the images that helped shape <em>The Alpha Flame: Reckoning</em>.
+            Some are character impressions, some are locations, and some are simply visual moods that helped me hold a scene in my head while writing.
+        </p>
+        <p>
+            They are not meant to be exact. They are fragments, glimpses, and visual echoes from the world behind the book.
+        </p>
+    </div>
 
-    <!-- Section 1 -->
     <div class="scrapbook-section">
         <div class="scrapbook-image rotate-1">
-            <responsive-image src="flyover-at-night.png" class="img-fluid" alt="The Rubery flyover at night time" display-width-percentage="50"></responsive-image>
+            <responsive-image src="maggie-grant-evidence.png" class="img-fluid" alt="Maggie Grant" display-width-percentage="50"></responsive-image>
         </div>
         <div class="scrapbook-text">
-            <h5>The Rubery Flyover</h5>
+            <h5>Maggie Grant</h5>
             <p>
-                A number of scenes in The Alpha Flame: Discovery are set, or at least start here. The Rubery flyover carries the A38 Bristol Road
-                down to meet the M5. It's the main road in and out of the city from the South West. Quite why the floyover exists is something of
-                a mystery to me. Apart from allowing traffic to pass underneath it, past "Beth's Bench", it seems to serve no purpose. It doesn't
-                bridge any sort of gap in the landscape. Neither does it provide access to a higher ground further along.
+                Maggie changes enormously through <em>Reckoning</em>. She starts with confidence, anger, and fire, but the deeper she digs, the more the past begins to pull at her.
             </p>
             <p>
-                Many years ago I used to live in this area and travelling underneath the flyover really gave me the creeps. As I describe in the book
-                there were often many unsavoury characters seated on the benches. And thre genuinely were women offering their bodies to whoever
-                happened to drive past.
+                This image captures something I wanted for her in this book: beauty, yes, but also tension. A woman being watched. A woman trying to work out whether the world around her is admiring her, threatening her, or both.
             </p>
         </div>
     </div>
 
-    <!-- Section 2 -->
     <div class="scrapbook-section flex-row-reverse">
         <div class="scrapbook-image rotate-2">
-            <responsive-image src="beth-in-her-flat.png" class="img-fluid" alt="Beth in her flat" display-width-percentage="50"></responsive-image>
+            <responsive-image src="sophie-jones-street-shot.png" class="img-fluid" alt="Sophie Jones" display-width-percentage="50"></responsive-image>
         </div>
         <div class="scrapbook-text">
-            <h5>Beth and Her Flat</h5>
+            <h5>Sophie Jones</h5>
             <p>
-                In the beginning Beth's flat was even more depressing that it is described in the book. The idea of a sterotypical
-                early 1980s council flat was too hard to resist. However once I had developed her personality a little further it
-                became obvious that she would have a lot more pride in where she lived, even if she had no money.
+                Sophie is one of those characters who should look like she belongs anywhere expensive, dangerous, or badly lit.
             </p>
             <p>
-                In reality the block of flats that I put Beth in are only two storeys on top of a row of shops. But for the
-                purpose of the book I made them into one of the taller blocks that can be found all over the area.
+                I wanted her to have that unsettling quality of someone who knows exactly how she is being seen, and uses it. She does not need to shout. She only needs to stand there long enough for people to understand that she expects the room to move around her.
             </p>
         </div>
     </div>
 
-    <!-- Section 3 -->
     <div class="scrapbook-section">
         <div class="scrapbook-image rotate-3">
-            <responsive-image src="rubery-hill-hospital.png" class="img-fluid" alt="Rubery Hill Hospital" display-width-percentage="50"></responsive-image>
+            <responsive-image src="simon-jones-mug-shot.png" class="img-fluid" alt="Simon Jones" display-width-percentage="50"></responsive-image>
         </div>
         <div class="scrapbook-text">
-            <h5>Rubery Hill Hospital</h5>
+            <h5>Simon Jones</h5>
             <p>
-                Now this place used to genuinely give me the creeps. It was built way back in the 1800s and as I say in the book,
-                was origonally known as "The City of Birmingham Lunatic Asylum". It was renamed many times over it's long life
-                but always had links to what we would call "mental health" these days. From what I have found out the only deviation
-                from this was during the war, when it was a hospital for injured soldiers.
+                Simon needed to feel polished, powerful, and poisonous. A man who has spent years being obeyed, and who expects his money and influence to smooth over every ugly thing beneath the surface.
+            </p>
+            <p>
+                By the time <em>Reckoning</em> reaches Scandals, that mask is beginning to crack. I liked the idea of him looking controlled even when the ground is starting to give way under his feet.
             </p>
         </div>
     </div>
 
-    <!-- Section 4 -->
     <div class="scrapbook-section flex-row-reverse">
         <div class="scrapbook-image rotate-4">
-            <div class="hero-video-container">
-                <video autoplay muted loop playsinline poster="/images/maggie-in-her-jumpsuit.png">
-                    <source src="/videos/maggie-in-her-jumpsuit.mp4" type="video/mp4">
-                    Your browser does not support the video tag.
-                </video>
-            </div>
+            <responsive-image src="Scandals.png" class="img-fluid" alt="Scandals fashion show" display-width-percentage="50"></responsive-image>
         </div>
         <div class="scrapbook-text">
-            <h5>Maggie in Her Jumpsuit</h5>
+            <h5>Scandals</h5>
             <p>
-                So, the scene where Maggie goes to Limelight and walks across the dance floor to go and say hello to Zoe and Graham. Is this what you imagined?
-                I doubt it, but it was what was in my mind. The original description of this outfit went on for over a page, and I think you can see why.
-                Unfortuantely it got severaly cut in the edit. You're probably quite thankful for that!
+                Scandals is glamour with rot underneath. On the surface, it is fashion, champagne, charity, and beautiful people pretending everything is perfectly civilised.
             </p>
             <p>
-                But wouldn't you just love to wear it!
+                But that room is also where power shifts. Maggie steps into the light as Grace, the money starts moving, and the truth begins forcing its way through the polished surface.
             </p>
         </div>
     </div>
 
-    <!-- Section 5 -->
     <div class="scrapbook-section">
         <div class="scrapbook-image rotate-1">
-            <responsive-image src="ricardos.png" class="img-fluid" alt="Ricardos" display-width-percentage="50"></responsive-image>
+            <responsive-image src="the-room-at-the-end.png" class="img-fluid" alt="The room at the end" display-width-percentage="50"></responsive-image>
         </div>
         <div class="scrapbook-text">
-            <h5>Ricardo's</h5>
+            <h5>The Room at the End</h5>
             <p>
-                The extremely lavish Riscrod's restaraunt went through many changes, and evloved into something more luxurious every
-                single time. I'm not sure this image does it justice, but I hope by my descriptions you got the feeling of the sheer
-                opulance within it.
+                Some rooms in the book are not frightening because of what they show, but because of what they imply.
             </p>
             <p>
-                In reality Northfield never had any such restaraunt, it's simply not that sort of place. But it's nice to think that
-                it could have.
+                I wanted certain interiors to feel over-dressed, too still, and faintly performative. The sort of room where everything has been arranged to suggest taste, comfort, and control, while hiding something much colder.
             </p>
         </div>
     </div>
 
-    <!-- Section 6 -->
     <div class="scrapbook-section flex-row-reverse">
         <div class="scrapbook-image rotate-2">
-            <responsive-image src="beth-in-her-flat.png" class="img-fluid" alt="Beth in her flat" display-width-percentage="50"></responsive-image>
+            <responsive-image src="the-thinking-spot.png" class="img-fluid" alt="Welsh landscape thinking spot" display-width-percentage="50"></responsive-image>
         </div>
         <div class="scrapbook-text">
-            <h5>Beth and Her Flat</h5>
+            <h5>The Thinking Spot</h5>
             <p>
-                In the beginning Beth's flat was even more depressing that it is described in the book. The idea of a sterotypical
-                early 1980s council flat was too hard to resist. However once I had developed her personality a little further it
-                became obvious that she would have a lot more pride in where she lived, even if she had no money.
+                Wales gives the story room to breathe. After the pressure of Birmingham, the Welsh sections needed space, salt air, hills, and quiet.
             </p>
             <p>
-                In reality the block of flats that I put Beth in are only two storeys on top of a row of shops. But for the
-                purpose of the book I made them into one of the taller blocks that can be found all over the area.
+                This image has the feeling I wanted for those moments when Beth and Maggie are not chasing anything, not being chased, just trying to understand where they have come from and what their mother left behind.
             </p>
         </div>
     </div>
 
-    <!-- Section 7 -->
     <div class="scrapbook-section">
         <div class="scrapbook-image rotate-3">
-            <responsive-image src="rubery-hill-hospital.png" class="img-fluid" alt="Rubery Hill Hospital" display-width-percentage="50"></responsive-image>
+            <responsive-image src="the-house-that-waited.png" class="img-fluid" alt="The house that waited" display-width-percentage="50"></responsive-image>
         </div>
         <div class="scrapbook-text">
-            <h5>Rubery Hill Hospital</h5>
+            <h5>The House That Waited</h5>
             <p>
-                Now this place used to genuinely give me the creeps. It was built way back in the 1800s and as I say in the book,
-                was origonally known as "The City of Birmingham Lunatic Asylum". It was renamed many times over it's long life
-                but always had links to what we would call "mental health" these days. From what I have found out the only deviation
-                from this was during the war, when it was a hospital for injured soldiers.
+                I loved the idea of a house that had been waiting for the girls without them knowing it.
+            </p>
+            <p>
+                Not haunted exactly, but full of memory. Somewhere that still carries Annie in the walls, in the furniture, in the stories people tell when they finally begin to speak.
             </p>
         </div>
     </div>
 
+    <div class="scrapbook-section flex-row-reverse">
+        <div class="scrapbook-image rotate-4">
+            <responsive-image src="the-cottage.png" class="img-fluid" alt="Welsh cottage" display-width-percentage="50"></responsive-image>
+        </div>
+        <div class="scrapbook-text">
+            <h5>The Cottage</h5>
+            <p>
+                The cottage represents the life that might have been. Quiet, rural, ordinary, and yet completely unreachable for so much of the story.
+            </p>
+            <p>
+                For Beth and Maggie, places like this are not just pretty scenery. They are evidence that their mother had a past, a family, and a version of herself they are only just beginning to discover.
+            </p>
+        </div>
     </div>
 
+    <div class="scrapbook-section">
+        <div class="scrapbook-image rotate-1">
+            <responsive-image src="rings-and-rituals.png" class="img-fluid" alt="Ring close-up" display-width-percentage="50"></responsive-image>
+        </div>
+        <div class="scrapbook-text">
+            <h5>Rings and Rituals</h5>
+            <p>
+                The rings matter because they are small, personal, and loaded with meaning. They connect the girls to Annie, but they also become part of something far darker.
+            </p>
+            <p>
+                I like objects in stories when they change meaning. A ring can be love, memory, proof, bait, or a weapon, depending on who is holding it.
+            </p>
+        </div>
+    </div>
+
+    <div class="scrapbook-section flex-row-reverse">
+        <div class="scrapbook-image rotate-2">
+            <responsive-image src="mrs-pattersons-front-room.png" class="img-fluid" alt="Mrs Patterson's front room" display-width-percentage="50"></responsive-image>
+        </div>
+        <div class="scrapbook-text">
+            <h5>Mrs Patterson’s Front Room</h5>
+            <p>
+                Mrs Patterson’s house needed to feel ordinary. That was the point. Tea cups, old furniture, soft furnishings, family photographs, and the kind of room where nothing dramatic should happen.
+            </p>
+            <p>
+                Which makes it all the worse when the past walks in. I wanted that contrast between domestic comfort and quiet betrayal.
+            </p>
+        </div>
+    </div>
+
+
+</div>
 
 @section Meta {
     <style>
+        .scrapbook-page {
+            color: #2b2118;
+        }
+
+            .scrapbook-page h1 {
+                color: #fff4dc;
+                text-shadow: 0 3px 10px rgba(0,0,0,.75);
+                font-weight: 800;
+            }
+
+        .scrapbook-intro {
+            max-width: 850px;
+            margin: 0 auto 3rem auto;
+            padding: 1.5rem 2rem;
+            border-radius: 1rem;
+            background: rgba(43, 33, 24, .88);
+            border: 1px solid rgba(211, 164, 95, .55);
+            color: #f3ead8;
+            box-shadow: 0 14px 35px rgba(0,0,0,.28);
+            line-height: 1.7;
+        }
+
         .scrapbook-section {
             margin-bottom: 4rem;
             display: flex;
             flex-wrap: wrap;
             align-items: center;
+            padding: 1.5rem;
+            border-radius: 1rem;
+            background: rgba(255, 250, 240, .88);
+            box-shadow: 0 12px 30px rgba(0,0,0,.18);
+            border: 1px solid rgba(211, 193, 162, .8);
         }
 
         .scrapbook-image {
-            background: white;
+            background: #fffaf0;
             padding: 10px 10px 30px 10px;
-            box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.15);
-            border: 1px solid #ccc;
+            box-shadow: 2px 4px 14px rgba(0, 0, 0, 0.22);
+            border: 1px solid #d3c1a2;
             width: 100%;
-            max-width: 300px;
+            max-width: 320px;
             margin: 1rem;
             transform: rotate(var(--angle));
         }
 
+            .scrapbook-image img,
+            .scrapbook-image picture,
+            .scrapbook-image video {
+                width: 100%;
+                height: auto;
+                display: block;
+            }
+
         .scrapbook-text {
             flex: 1;
             min-width: 250px;
             margin: 1rem;
+            font-size: 1rem;
+            line-height: 1.7;
+        }
+
+            .scrapbook-text h5 {
+                font-size: 1.35rem;
+                font-weight: 800;
+                color: #3b2a1c;
+                margin-bottom: 1rem;
             }
 
         .rotate-1 {
@@ -212,12 +269,14 @@
         }
 
         @@media (max-width: 768px) {
-            .scrapbook-section {
-                flex-direction: column;
+            .scrapbook-section,
+            .scrapbook-section.flex-row-reverse {
+                flex-direction: column !important;
             }
 
             .scrapbook-image {
                 margin-bottom: 1rem;
+                transform: rotate(0deg);
             }
         }
     </style>

CatherineLynwood/Views/Reckoning/Soundtrack.cshtml

@@ -1,12 +1,27 @@
 @model List<CatherineLynwood.Models.SoundtrackTrackModel>
 @{
-    ViewData["Title"] = "Alpha Flame • Soundtrack";
+    ViewData["Title"] = "Alpha Flame Reckoning • Soundtrack";
 }
 
+
+
 <section class="container my-4" id="soundtrack">
+    <div class="row">
+        <div class="col-12">
+            <nav aria-label="breadcrumb">
+                <ol class="breadcrumb">
+                    <li class="breadcrumb-item"><a asp-controller="Home" asp-action="Index">Home</a></li>
+                    <li class="breadcrumb-item"><a asp-controller="TheAlphaFlame" asp-action="Index">The Alpha Flame</a></li>
+                    <li class="breadcrumb-item"><a asp-controller="Reckoning" asp-action="Index">Reckoning</a></li>
+                    <li class="breadcrumb-item"><a asp-controller="Reckoning" asp-action="Extras">Extras</a></li>
+                    <li class="breadcrumb-item active" aria-current="page">Soundtrack</li>
+                </ol>
+            </nav>
+        </div>
+    </div>
     <header class="mb-4">
-        <h1 class="h2">The Alpha Flame • Soundtrack</h1>
-        <p class="text-muted mb-0">Eight original tracks inspired by key chapters; listen while you read…</p>
+        <h1 class="h2">The Alpha Flame Reckoning • Soundtrack</h1>
+        <p class="text-white mb-0">Original tracks inspired by key chapters; listen while you read…</p>
     </header>
 
     <div class="row gy-4">

CatherineLynwood/Views/Reckoning/_Chapter1.cshtml

@@ -0,0 +1,253 @@
+<section class="chapter-reader">
+    <header class="chapter-reader__header">
+        <p class="chapter-reader__eyebrow">The Alpha Flame: Reckoning</p>
+        <h1 class="chapter-reader__title">Chapter 1, Echoes of the Past</h1>
+        <p class="chapter-reader__meta">Narrated by Maggie, 28th May 1983</p>
+    </header>
+
+    <div class="chapter-reader__audio">
+        <div class="chapter-reader__audio-card">
+            <div class="chapter-reader__audio-content">
+                <p class="chapter-reader__audio-title">🎙️Chapter Audio</p>
+                <p class="chapter-reader__audio-subtitle">Narrated by Maggie</p>
+
+                <audio controls preload="none" class="chapter-reader__audio-player">
+                    <source src="/audio/the-alpha-flame-reckoning-chapter-1.mp3" type="audio/mpeg">
+                    Your browser does not support the audio element.
+                </audio>
+            </div>
+        </div>
+    </div>
+
+    <article class="chapter-reader__content">
+
+        <p>Beth woke with a gasp, sharp and desperate, like she’d just surfaced from drowning.</p>
+
+        <p>I was already half-awake, and I felt her body jolt from her sleep beside me, the sheets pulled tight with panic. She curled in on herself, shivering.</p>
+
+        <p>“Hey,” I whispered, rolling towards her, touching her arm gently. “It’s okay. You’re safe. I’m here. It’s me.”</p>
+
+        <p>She didn’t speak at first. Just breathed, shallow, half breaths that made her whole frame tremble.</p>
+
+        <p>I reached for the bedside lamp, blinking as the warm light spilled across the room. Her eyes were wide, unfocused, like she was still halfway trapped in whatever place she’d just come from.</p>
+
+        <p>“The dream?” I queried.</p>
+
+        <p>Beth nodded, her voice barely a breath. “It’s always the same,” she whispered.</p>
+
+        <p>I knew.</p>
+
+        <p>Mine was the same too. Rick, emerging from the dark, all teeth and rage and blood. Beth screaming somewhere behind me. My body frozen, useless. And then… always… the cold grip of his hand just as I tried to run.</p>
+
+        <p>“I can’t move,” she murmured. “In the dream, I mean. I can see him, and I know what’s coming, but I can’t… I can’t do anything.”</p>
+
+        <p>I swallowed. “I know,” I whispered, pulling her close.</p>
+
+        <p>We lay there for a moment in the quiet, the clock ticking gently on the bedside table. The window was cracked open, letting in the soft hush of early summer air. It felt wrong somehow… too peaceful.</p>
+
+        <p>“What’s the time?” asked Beth.</p>
+
+        <p>“Just gone half seven,” I replied. “Do you want a cup of tea?”</p>
+
+        <p>Beth nodded.</p>
+
+        <p>As I got up and put on my dressing gown, Beth looked thoughtful.</p>
+
+        <p>“Can you pass the memory tin?”</p>
+
+        <p>I smiled and took it out of the drawer that had become its home, handing it to her.</p>
+
+        <p>I left to make the tea, and on my return, I was greeted to the sight of the entire contents of the tin spread all over the bed.</p>
+
+        <p>“Okay…?” I said slowly, grinning at Beth as though she’d lost the plot.</p>
+
+        <p>She looked up at me chuckling.</p>
+
+        <p>“I was thinking,” she said. “The answer has to be here somewhere… If we’re to get Rick out of our heads, then we need to know why he did what he did. There’s no doubt he did it, but why…? There must be a reason. I mean… I know he’s evil.” Beth shuddered. “But he must have had a reason. He must.”</p>
+
+        <p>I thought about it for a while, considering what she’d said.</p>
+
+        <p>“I’d like to think so,” I agreed. “But what is it?” Sitting down, looking at the contents strewn all around. “You said everything in the tin was put there by our mum, right?”</p>
+
+        <p>“Yes. Pretty much. The only thing I’ve added is her death certificate. Other than that, I’ve added nothing.”</p>
+
+        <p>I glanced around the bed.</p>
+
+        <p>“Then everything must be there for a reason. If she knew anything, then there must be a clue in here somewhere.”</p>
+
+        <p>“I’ve looked through the photos so many times,” Beth replied. “But I’ve never found anything.”</p>
+
+        <p>I thought for a while.</p>
+
+        <p>“The thing is, it’s not that we don’t know the answer… It’s worse than that,” I said quietly. “We don’t even know the questions.”</p>
+
+        <p>Beth nodded, her eyes moving slowly over the contents of the bed, thinking.</p>
+
+        <p>“Well, I’d like to know why mum was murdered,” she said at last. “Not just who by. There has to be a reason.”</p>
+
+        <p>She fell silent, her gaze drifting to our mum’s wedding photo. She picked it up gently, her thumb brushing the edge.</p>
+
+        <p>“And I’d like to know if this is our dad,” she added. “He looks nice.”</p>
+
+        <p>I stared at the black and white picture. A crowd gathered outside a small stone church, confetti caught mid-air. Our mum looked radiant, no older than we were now.</p>
+
+        <p>Beth turned it over. On the back, written in biro, were the words: <span class="chapter-reader__artifact">St David’s Church, 16th June 1961</span>.</p>
+
+        <p>“Wow,” I murmured. “Mum had only just turned sixteen.”</p>
+
+        <p>I frowned at the date again. Sixteen. I knew it wasn’t unheard of back then, but it still felt… young.</p>
+
+        <p>“Maybe the church is a clue,” I said slowly.</p>
+
+        <p>A quick check of the phone book confirmed there were two churches called St David’s nearby. One in Shenley Green, the other in Highgate.</p>
+
+        <p>“It’s somewhere to start,” I said.</p>
+
+        <p>Beth nodded. “Yes. It is.”</p>
+
+        <p>I made a note of the addresses on a piece of paper.</p>
+
+        <p>Looking around the bed, for the first time I noticed a small square inconspicuous brown box.</p>
+
+        <p>“What’s that?”</p>
+
+        <p>Beth picked the box up, smiling. The lid was hinged on one side. It was an old-fashioned ring box. She opened it and held the contents up for me to extract.</p>
+
+        <p>Inside were two gold rings. The first, an engagement ring. Dainty, with a thin dark gold band, encrusted with a single diamond set in a heart shaped mount. As she held it up to the light it sparkled and glistened. I pulled the curtains open to let the sunshine in and the ring caught the sunlight, scattering it in tiny flashes across the room.</p>
+
+        <p>“It’s beautiful.”</p>
+
+        <p>“Try it on,” suggested Beth.</p>
+
+        <p>“Oh… I can’t,” I objected, a lump tightening in my throat. “It doesn’t feel right. Like it belongs to you, not me.”</p>
+
+        <p>“Why not? She was your mum too,” said Beth, softly, gentle.</p>
+
+        <p>I hesitated, my fingers trembling as I slid the ring onto my index finger, testing it, as though I had no right to wear it properly. Beth shook her head, took the ring from me and slipped it onto my wedding finger instead. The cool metal settled against my skin as if it had always been meant for me. That thought made me feel like a fraud, yet the fit was undeniable.</p>
+
+        <p>Beth smiled, a glint of pride in her eyes.</p>
+
+        <p>“It’s a little loose on me,” she said. “You’ve got fatter fingers,” she added with a laugh, grounding the moment.</p>
+
+        <p>I laughed too, grateful for the release. “You’re catching me up. It’s all those sausage sandwiches.”</p>
+
+        <p>She laughed again and reached for the other ring in the box.</p>
+
+        <p>The second ring was a simple gold band, a wedding ring. Once more, quite dainty, certainly designed for a woman. As I inspected it, I noticed an engraving along the inside of the ring, <span class="chapter-reader__artifact">‘Love is Flame.’</span></p>
+
+        <blockquote class="chapter-reader__poem">
+            <p>
+                One came with thunder, one with flame,<br>
+                The years between, not quite the same.<br>
+                From me to you, two paths unfold,<br>
+                One marked in silver, one in gold.
+            </p>
+
+            <p>
+                Some things we carry, some things we hear,<br>
+                A whisper of truth through crackle and fear.<br>
+                Where music still plays and memories stay,<br>
+                Look not at the sound, but what lies in its sway.
+            </p>
+
+            <p>
+                The key you seek lies not in this rhyme,<br>
+                But inked where the ledger remembers time.<br>
+                Letters may hide in numbers proud,<br>
+                But not every sum needs naming aloud.
+            </p>
+
+            <p>
+                If ever you're lost or chasing a thread,<br>
+                Let this guide you to what lies ahead.<br>
+                The second will guide you, the first may mislead,<br>
+                Count not the years, but the time in between.
+            </p>
+        </blockquote>
+
+        <p>“That’s beautiful,” I said.</p>
+
+        <p>Beth smiled, that lovely warm smile she gave when remembering her most precious moments. Then, as I watched, her face changed.</p>
+
+        <p>“Oh my God!” she exclaimed. “I’ve just realised, that poem… it’s about us!”</p>
+
+        <p>I looked at the piece of paper again.</p>
+
+        <p>“That first bit, it’s you and me,” said Beth, her voice full of excitement. “It’s only just dawned on me. I’ve read that so many times, but I never knew,” a huge smile lighting up her face.</p>
+
+        <p>She took the piece of paper off me carefully and read it once more.</p>
+
+        <p>“I’ve no idea what the rest of it means, but now I love it even more.”</p>
+
+        <p>We drank our tea, and Beth tidied up the bed, carefully putting everything back into the tin and placing it lovingly back in the drawer.</p>
+
+        <p>“Listen,” I said. “How about we get it framed. Then we can put it on the wall and see it every day?”</p>
+
+        <p>Beth smiled, but not fully.</p>
+
+        <p>“Not a good idea?” I queried.</p>
+
+        <p>Beth’s smile widened a little, though it didn’t quite reach her eyes.</p>
+
+        <p>“Yes… I’d like that.”</p>
+
+        <p>“But…?”</p>
+
+        <p>“It doesn’t feel right taking it out of the tin,” she insisted.</p>
+
+        <p>I nodded. I understood entirely. This tin had been Beth’s life, her salvation, the one safe place she’d ever had. Splitting it up wouldn’t feel right.</p>
+
+        <p>“Well, how about we get some nice paper and write it out, and frame that?” I suggested. “That way we can see the words every day but not disturb the tin.”</p>
+
+        <p>Beth’s eyes brightened. “Yes. I like that.”</p>
+
+        <p>After a quick chat we decided to go down the village and buy a frame. We dressed and went through to the living room. Mum was surprised to see us.</p>
+
+        <p>“Oh my word. What on earth are you two doing up at this time of day, let alone dressed?”</p>
+
+        <p>We told her our plans as we put our shoes on.</p>
+
+        <p>It wasn’t long before we were in the village, walking along New Road, the main street lined with rows of shops on either side. Even though it was early, there were shoppers everywhere.</p>
+
+        <p>We stopped outside Roy’s Toys.</p>
+
+        <p>“I used to love going in there as a kid,” said Beth.</p>
+
+        <p>I stared at her, surprised. “Me too. Every Saturday nearly. How did we never meet?”</p>
+
+        <p>Beth grinned. “Come on, let’s go in.”</p>
+
+        <p>The bell above the door jingled as we stepped inside. The air smelled faintly of dust and cardboard, the same as it had when I was little.</p>
+
+        <p>“I always wanted one of these,” Beth said, lifting a boxed train set from the shelf.</p>
+
+        <p>“Same here,” I laughed. “Mum always said they were for boys.”</p>
+
+        <p>We lingered over a display of miniature fashion dolls, each wearing bright, slightly tacky dresses.</p>
+
+        <p>“You’d have redesigned all of these,” Beth teased.</p>
+
+        <p>“Of course. They’re a crime against fashion.”</p>
+
+        <p>When we stepped back out into the sunlight, still smiling, we strolled on.</p>
+
+        <p>Two doors down, we passed the only vacant shop on the street.</p>
+
+        <p>“Shame,” I murmured, peering in. “It’s been empty for a couple of years now. I always thought it would make a great dress shop… sell my designs and a few other bits.”</p>
+
+        <p>We passed the Village Kitchen café, and the air changed instantly. The comforting, unmistakable smell of proper breakfasts rolled out every time the door opened, bacon, coffee, toast and something buttery I couldn’t quite place.</p>
+
+        <p>We moved on to the framing shop, its windows full of neatly displayed pictures in every size and style. Inside, the smell of fresh-cut wood and paper hung in the air.</p>
+
+        <p>Eventually we chose one with a warm oak finish that would suit the poem perfectly.</p>
+
+        <p>“They’ve got art papers too,” Beth pointed out, leading me to a rack where thick sheets in every shade and texture were stacked.</p>
+
+        <p>At the counter, the woman wrapped our purchases in brown paper and string.</p>
+
+        <p>We made our way back home slowly, the bag swinging between us, talking idly about where the poem might hang, and what colour ink would look best against the cream paper.</p>
+
+        <p class="chapter-reader__closing">Little did I know how significant this morning would be.</p>
+
+    </article>
+</section>

CatherineLynwood/Views/Reckoning/_ReckoningChapters.cshtml

@@ -0,0 +1,3 @@
+@model CatherineLynwood.Models.TitlePageViewModel
+
+<partial name="_Chapter1" />

CatherineLynwood/Views/Reckoning/_ReckoningMaps.cshtml

@@ -0,0 +1,47 @@
+@model CatherineLynwood.Models.TitlePageViewModel
+
+<h2>Map Reference</h2>
+<p class="casefile-evidence-intro">
+    Evidence and events occured in the locations shown below.
+</p>
+
+<div class="casefile-evidence-list">
+
+    <section class="casefile-evidence-item">
+        <div class="casefile-evidence-item-header">
+            <div class="casefile-evidence-item-id">Rubery Area</div>
+        </div>
+
+        <div class="casefile-evidence-media bg-white">
+            <responsive-image src="rubery-map.png"
+                              class="casefile-evidence-image"
+                              alt="A not to scale map of Rubery and the surrounding area."
+                              display-width-percentage="50"></responsive-image>
+        </div>
+
+        <p>
+            Although much of the observed activity appears to have occured in the Rubery area, there is evidence to suggest activity on Solihull and Birmingham.
+        </p>
+        <p>
+            Officers continue to keep surveilance on all areas of concern.
+        </p>
+    </section>
+
+    <section class="casefile-evidence-item">
+        <div class="casefile-evidence-item-header">
+            <div class="casefile-evidence-item-id">Barmouth / Harlech Area</div>
+        </div>
+
+        <div class="casefile-evidence-paperclip bg-white">
+            <responsive-image src="wales-map.png"
+                              class="casefile-evidence-image"
+                              alt="A not to scale map of Barmouth and the surrounding area."
+                              display-width-percentage="50"></responsive-image>
+        </div>
+
+        <p>
+            The Barmouth police have notified us of certain events that occured around Barmouth and the surrounding areas.
+        </p>
+    </section>
+
+</div>

CatherineLynwood/wwwroot/css/reckoning-mobile.css

@@ -221,6 +221,10 @@
     background: #e0b0b0;
 }
 
+.reckoning-tab-maps {
+    background: #d6cca0; /* slightly more beige */
+}
+
 .reckoning-mobile-paper {
     background: #f7f1e4;
     border: 1px solid rgba(90, 66, 42, 0.16);

CatherineLynwood/wwwroot/css/reckoning.css

@@ -463,31 +463,46 @@
 
     .casefile-tab:nth-child(1) {
         background: #f6d96b;
-        z-index: 6;
+        z-index: 9;
     }
 
     .casefile-tab:nth-child(2) {
         background: #f4a6c1;
-        z-index: 5;
+        z-index: 8;
     }
 
     .casefile-tab:nth-child(3) {
         background: #9ed8f5;
-        z-index: 4;
+        z-index: 7;
     }
 
     .casefile-tab:nth-child(4) {
         background: #b9e3a1;
-        z-index: 3;
+        z-index: 6;
     }
 
     .casefile-tab:nth-child(5) {
         background: #f7b26a;
-        z-index: 2;
+        z-index: 5;
     }
 
     .casefile-tab:nth-child(6) {
         background: #c7b5f0;
+        z-index: 4;
+    }
+
+    .casefile-tab:nth-child(7) {
+        background: #f28b82; /* soft red */
+        z-index: 3;
+    }
+
+    .casefile-tab:nth-child(8) {
+        background: #a0e7e5; /* mint */
+        z-index: 2;
+    }
+
+    .casefile-tab:nth-child(9) {
+        background: #e6c79c; /* manila / paper tone */
         z-index: 1;
     }
 
@@ -505,12 +520,12 @@
         }
 
     .casefile-tab.restricted {
-        background: #c7b5f0;
+        background: #e6c79c;
         color: #5c4631;
     }
 
         .casefile-tab.restricted.active {
-            background: #c7b5f0;
+            background: #e6c79c;
             color: #5c4631;
         }
 
@@ -980,3 +995,173 @@
     /* Optional: soften edges slightly */
     border-radius: 2px;
 }
+
+.chapter-reader {
+    max-width: 860px;
+    margin: 0 auto;
+    padding: 2rem 1.5rem;
+    background: rgba(248, 244, 236, 0.92);
+    border: 1px solid rgba(107, 84, 58, 0.18);
+    border-radius: 18px;
+    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
+    color: #35291f;
+    position: relative;
+}
+
+    .chapter-reader::before {
+        content: "";
+        position: absolute;
+        inset: 10px;
+        border: 1px solid rgba(107, 84, 58, 0.12);
+        border-radius: 12px;
+        pointer-events: none;
+    }
+
+.chapter-reader__header {
+    margin-bottom: 2rem;
+    padding-bottom: 1.25rem;
+    border-bottom: 1px solid rgba(107, 84, 58, 0.2);
+    text-align: center;
+}
+
+.chapter-reader__eyebrow {
+    margin: 0 0 0.5rem;
+    font-size: 0.78rem;
+    font-weight: 700;
+    letter-spacing: 0.16em;
+    text-transform: uppercase;
+    color: #8a5a44;
+}
+
+.chapter-reader__title {
+    margin: 0;
+    font-size: clamp(1rem, 1vw, 1.5rem);
+    line-height: 1.1;
+    font-weight: 200;
+    color: #5d2f2f;
+}
+
+.chapter-reader__meta {
+    margin: 0.85rem 0 0;
+    font-size: 0.98rem;
+    font-style: italic;
+    color: #6a5746;
+}
+
+.chapter-reader__content {
+    font-size: 1.08rem;
+    line-height: 1.9;
+}
+
+    .chapter-reader__content p {
+        margin: 0 0 1.35rem;
+        text-wrap: pretty;
+    }
+
+        .chapter-reader__content p + p {
+            text-indent: 0;
+        }
+
+.chapter-reader__artifact {
+    display: inline-block;
+    padding: 0.08rem 0.35rem;
+    background: rgba(201, 168, 112, 0.16);
+    border-radius: 4px;
+    font-style: italic;
+    color: #5a4330;
+}
+
+.chapter-reader__poem {
+    margin: 2rem 0;
+    padding: 1.5rem 1.75rem;
+    background: rgba(255, 250, 240, 0.9);
+    border-left: 4px solid #b7895b;
+    border-radius: 12px;
+    box-shadow: inset 0 0 0 1px rgba(107, 84, 58, 0.08);
+}
+
+    .chapter-reader__poem p {
+        margin-bottom: 1.2rem;
+        font-style: italic;
+        line-height: 1.8;
+        color: #4e3a2b;
+    }
+
+        .chapter-reader__poem p:last-child {
+            margin-bottom: 0;
+        }
+
+.chapter-reader__closing {
+    margin-top: 2rem;
+    padding-top: 1rem;
+    font-weight: 600;
+    color: #5d2f2f;
+}
+
+@media (max-width: 640px) {
+    .chapter-reader {
+        padding: 1.4rem 1rem;
+        border-radius: 14px;
+    }
+
+    .chapter-reader__content {
+        font-size: 1rem;
+        line-height: 1.8;
+    }
+
+    .chapter-reader__poem {
+        padding: 1.1rem 1rem;
+    }
+}
+
+.chapter-reader__audio {
+    margin: 1.75rem 0 2.25rem;
+}
+
+.chapter-reader__audio-label {
+    margin-bottom: 0.5rem;
+    font-size: 0.85rem;
+    text-transform: uppercase;
+    letter-spacing: 0.12em;
+    color: #8a5a44;
+    font-weight: 600;
+}
+
+.chapter-reader__audio-player {
+    width: 100%;
+    border-radius: 8px;
+}
+
+/* Styled version */
+
+.chapter-reader__audio-card {
+    display: flex;
+    gap: 1rem;
+    align-items: center;
+    padding: 1rem 1.2rem;
+    background: rgba(255, 250, 240, 0.9);
+    border: 1px solid rgba(107, 84, 58, 0.2);
+    border-radius: 12px;
+    box-shadow: 0 6px 18px rgba(0,0,0,0.05);
+}
+
+.chapter-reader__audio-icon {
+    font-size: 1.8rem;
+    opacity: 0.8;
+}
+
+.chapter-reader__audio-content {
+    flex: 1;
+}
+
+.chapter-reader__audio-title {
+    margin: 0;
+    font-weight: 700;
+    color: #5d2f2f;
+}
+
+.chapter-reader__audio-subtitle {
+    margin: 0 0 0.6rem;
+    font-size: 0.9rem;
+    color: #6a5746;
+}