1 files changed, 432 insertions, 325 deletions

diff --git a/public/stylesheets/ccc.css b/public/stylesheets/ccc.css
index cbeea17..8358d06 100644
--- a/public/stylesheets/ccc.css
+++ b/public/stylesheets/ccc.css
@@ -1,3 +1,55 @@
+/* ==========================================================================
+   ccc.css — annotated demolition survey (behavior-preserving rewrite)
+   ==========================================================================
+   Sorted into nine concerns; each banner carries an ASSUMES: line naming
+   the tokens and images it depends on. Within any equal-specificity
+   collision set, relative source order is preserved verbatim.
+   ========================================================================== */
+
+/* ==========================================================================
+   1. DESIGN TOKENS
+   ==========================================================================
+   The desktop layout is a fixed lattice drawn around two images:
+   header.png (909px wide, 145px tall) and left_column.png (continues the
+   header artwork down the left menu band via a wrapper-covering ::before).
+   Change these tokens and the two images must be regenerated — that IS
+   the redesign.
+   NOTE: custom properties cannot appear in @media conditions, so the
+   1015/1016 breakpoint below stays a literal pair. Its provenance is
+   unexplained (roughly --page-width plus a margin allowance).
+   ========================================================================== */
+
+:root {
+  --page-width: 909px;      /* header.png's drawn width; the wrapper.
+                               Decomposes: 185 left band (135 col + 50 pad)
+                               + 490 center at left 200 + 210 right band
+                               (155 col + 55 pad) at left 690. 690 + 210
+                               = 900: 9px absorbed silently at the right
+                               edge. */
+  --header-height: 145px;   /* header.png's pixel height; search box and
+                               light-mode toggle hang from its bottom
+                               edge. */
+  --left-col-width: 135px;  /* left band = this + --left-col-pad = 185px */
+  --left-col-pad: 50px;
+  --center-left: 200px;     /* 15px gutter beyond the 185px left band */
+  --center-width: 490px;
+  --right-left: 690px;      /* = --center-left + --center-width */
+  --right-width: 155px;     /* right band = this + --right-pad = 210px */
+  --right-pad: 55px;
+  --search-left: 676px;     /* provenance unknown; sits 14px left of
+                               --right-left */
+  --toggle-left: 816px;     /* provenance unknown; 140px right of
+                               --search-left */
+  --burger-right: 54px;     /* provenance unknown */
+}
+
+/* ==========================================================================
+   2. RESET & DOCUMENT SCAFFOLD
+   ==========================================================================
+   ASSUMES: nothing from the lattice. Element defaults and generic
+   utilities only.
+   ========================================================================== */
+
 html {
   height: 100%;
   line-height: 1.6rem;
@@ -17,6 +69,54 @@ body {
   height: 100%;
 }
 
+img {
+  max-width: 100%;
+}
+
+pre {
+  overflow: auto;
+}
+
+li {
+    line-height: 1.5rem;
+    margin-block-start: 1rem;
+    margin-block-end: 1rem;
+}
+
+dt {
+  font-weight: bold;
+  margin-bottom: 1em;
+}
+
+dd {
+  margin-bottom: 1em;
+}
+
+.pagination {
+  margin-bottom: .5rem;
+}
+
++ /* Single caller: _headline_image.html.erb's image-count caption
++    ("N Bilder"), shown only when a gallery has more than one image. */
+.right {
+  text-align: right;
+}
+
+.hide-me {
+    display: none;
+}
+
+/* ==========================================================================
+   3. COLOR SCHEME & LIGHT/DARK TOGGLE
+   ==========================================================================
+   ASSUMES: --header-height, --toggle-left (desktop toggle position);
+   header.png and left_column.png (the invert(50%) treatment); the nonced
+   inline restore script in the layout that re-checks #light-mode before
+   first paint (the JS contract: checkbox id "light-mode", state persisted
+   by the script). Symmetric blocks: each scheme inverts when the toggle
+   is checked.
+   ========================================================================== */
+
 @media (prefers-color-scheme: light) {
     body:has(#light-mode:checked) {
         color-scheme: dark;
@@ -49,114 +149,221 @@ body {
     }
 }
 
-img {
-  max-width: 100%;
+input#light-mode[type="checkbox"] {
+    display: none;
 }
 
-div#header img {
-  border: none;
+label[for=light-mode] {
+    font-size: 25px;
+    user-select: none;
+    cursor: pointer;
+    filter: grayscale(1) contrast(10%);
 }
 
-@media(min-width:1016px) {
-  div#wrapper {
-    position: relative;
-    width: 909px;
-    margin: 0 auto 0 auto;
-    text-align: left;
-    min-height: 100%;
-  }
-  .break-mobile {
-      display: block;
+/* Light and dark mode button magic */
+@media(max-width:1015px) {
+  div#light-mode-div {
+    position: absolute;
+    left: 170px;  /* mobile toolbar offset; provenance unknown — anchors to
+                     the viewport, not #toolbox (see section 5) */
   }
 }
 
-pre {
-  overflow: auto;
-}
-
-.right {
-  text-align: right;
+@media(min-width:1016px) {
+  div#light-mode-div {
+    position: absolute;
+    top: var(--header-height);  /* bottom edge of header.png */
+    left: var(--toggle-left);
+  }
 }
 
-/*------------------links-------------------*/
+/* ==========================================================================
+   4. LINKS & HEADINGS
+   ==========================================================================
+   ASSUMES: nothing from the lattice. Site-wide type and link colors;
+   the orange is the one brand color that survives theming.
+   ========================================================================== */
 
 a {
   color: #F8921E;
   text-decoration: none;
 }
 
-a:visited {
-  color: #D1791A;
-  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
-}
-
 a:hover {
   color: #5b8ca7;
 }
 
-/*------------------headlines-------------------*/
-
 h2 {
   font-size: 1.5rem;
   font-family: Helvetica, Arial, sans-serif;
   line-height: 1.75rem;
 }
 
-div#center_column h2 a {
-  color: CanvasText;
+h3 {
+  font-size: 1.3rem;
   text-decoration: none;
+
 }
 
-div#center_column h2 a:hover {
-  color: color-mix(in srgb, CanvasText, #808080 50%);
+h4 {
+  font-size: 1.0rem;
+  text-decoration: none;
 }
 
-div#center_column h2.headline {
-  margin-top: 10px;
+h1, h2, h3 {
+  word-wrap: anywhere;
+  hyphens:auto;
 }
 
-div#center_column .article_partial h2.headline {
-  padding-top: 30px;
-  margin-bottom: 0.3rem;
-  border-top: 2px solid #cccccc;
+/* ==========================================================================
+   5. LAYOUT GRID
+   ==========================================================================
+   ASSUMES: the full token lattice; header.png (drawn width = --page-width,
+   height = --header-height); left_column.png (continues the header art
+   down the left band via the ::before at z-index -10).
+   KNOWN STRUCTURAL DEBT: all three columns are position:absolute on
+   desktop, but #footer lives INSIDE #center_column — a long sidebar can
+   overflow past the footer. The column-height assumption is nowhere
+   enforced.
+   MOBILE ANCHORING: on max-width, #wrapper has no position, so the
+   absolutely positioned toolbox children (#burger-div, #search,
+   #light-mode-div) anchor to the viewport, not to #toolbox.
+   ========================================================================== */
+
+@media(min-width:1016px) {
+  div#wrapper {
+    position: relative;
+    width: var(--page-width);  /* header.png's drawn width */
+    margin: 0 auto 0 auto;
+    text-align: left;
+    min-height: 100%;
+  }
+  .break-mobile {
+      display: block;
+  }
 }
 
-/* except for erfa list */
-div#center_column .chapter_partial h2.headline {
-  border-top: none;
+/* Header */
+#header img,
+#header > a {
+  display: block;
+  line-height: 0;
 }
 
-div.article_partial h2 a {
-  text-decoration: none;
+div#header img {
+  border: none;
 }
 
-h3 {
-  font-size: 1.3rem;
-  text-decoration: none;
+#left_column {
+  line-height: 1.5em;
+}
 
+@media(min-width:1016px) {
+  div#left_column::before {
+        content: " ";
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        box-sizing: border-box;
+    background-image: url(/images/left_column.png);
+    background-position: top right;
+    background-repeat: no-repeat;
+        z-index: -10;
+  }
+  div#left_column {
+    position: absolute;
+    left: 0px;
+    width: var(--left-col-width);
+    min-height: 100px;
+    text-align: right;
+    padding-right: var(--left-col-pad);  /* left band total: 185px */
+  }
+
+  div#left_column > a {
+    font-size: 0.8rem;
+  }
 }
 
-h4 {
-  font-size: 1.0rem;
-  text-decoration: none;
+div#center_column {
+  padding-bottom: 40px;
 }
 
-#left_column {
-  line-height: 1.5em;
+@media(max-width: 1015px) {
+div#center_column {
+  padding: 0 15px 40px 15px;
+}
+}
+
+@media(min-width: 1016px) {
+  div#center_column {
+    position: absolute;
+    background-color: Canvas;
+    left: var(--center-left);
+    width: var(--center-width);
+  }
+}
+
+@media(min-width:1016px) {
+  div#right_column {
+    position: absolute;
+    background-color: Canvas;
+    padding-left: var(--right-pad);
+    left: var(--right-left);   /* = center-left + center-width */
+    width: var(--right-width); /* right band total: 210px; 690 + 210 = 900,
+                                  9px short of --page-width, absorbed
+                                  silently */
+    height: 100px;
+  }
 }
 
-/*------------------main-navigation-------------------*/
+/* Mobile toolbar strip. */
+@media(max-width:1015px) {
+#toolbox {
+    height: 30px;
+}
+}
+
+/* Footer */
+#footer {
+  border-bottom: 2px solid #aeadad;
+  border-top: 2px solid #aeadad;
+  bottom: 0;
+  color: CanvasText;
+}
+
+#footer p {
+  margin: .5rem auto;
+}
+
+#footer a {
+  margin-left: 1rem;
+  margin-right: 1rem;
+  color: CanvasText;   
+}
+
+/* ==========================================================================
+   6. MAIN NAVIGATION & BURGER MENU
+   ==========================================================================
+   ASSUMES: --burger-right; the checkbox-hack markup order in the layout
+   (#toolbox precedes #left_column — the `#toolbox ~ #left_column`
+   sibling selectors break if the layout reorders them); left_column.png
+   behind the desktop nav. Mobile menu is pure CSS: .menu-checkbox state
+   drives both the burger-to-X morph and the menu slide.
+   COLLISION SET (order preserved): div.main_navigation ul base rule
+   before its min-width override — the override's `padding: 0` must win.
+   ========================================================================== */
 
 div.main_navigation ul {
   margin-left: 0;
-  padding-left: 0;
-  padding-left: 15px;
+  padding-left: 15px;   /* dead duplicate `padding-left: 0` removed */
   padding-right: 15px;
   text-align: left;
 }
 
 
-@media(max-width:1016px) {
+@media(max-width:1015px) {
   div.main_navigation li:not(:first-child):before {
     content: '•';
     margin-left: .3rem;
@@ -203,7 +410,125 @@ div.main_navigation a.inactive, div.main_navigation span.inactive, div#left_colu
   color: color-mix(in srgb, CanvasText, #808080 25%);
 }
 
-/*------------------calendar-featured-tags-------------------*/
+.menu-checkbox {
+    display: none;
+}
+
+.burger-menu {
+    display: none;
+    cursor: pointer;
+}
+
+#burger-div {
+    position: absolute;
+    right: var(--burger-right);  /* anchors to the viewport on mobile,
+                                    see section 5 */
+}
+
+/* Mobile styles */
+@media (max-width: 1015px) {
+    .burger-menu {
+                position: absolute;
+                display: flex;
+                flex-direction: column;
+                transition: transform 0.3s ease, opacity 0.3s ease;
+        }
+        
+        .burger-menu span {
+            display: inline-flex;
+        width: 26px;
+        height: 4px;
+        background: color-mix(in srgb, CanvasText, #808080 25%);
+        border-radius: 2px;
+        margin: 3px 0;
+            transition: max-height 0.5s ease-in-out, opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
+    }
+
+        #left_column .main_navigation {
+                width: 100%;
+        position: relative;
+        }
+
+    #toolbox ~ #left_column .main_navigation ul {
+        transition: max-height 0.2s ease-in-out, transform 0.4s ease-in-out, opacity 0.4s ease;
+        overflow: hidden;
+        text-align: center;
+    }
+
+    #toolbox ~ #left_column .main_navigation:first-of-type ul {
+            transform: translateY(-200px);
+        max-height: 0;
+                opacity: 0;
+        z-index: -10;
+    }
+    
+    /* Show menu when checkbox is checked */
+    #toolbox:has(.menu-checkbox:checked) ~ #left_column .main_navigation ul {
+        max-height: 400px;
+        opacity: 1;
+        transform: translateY(0);
+    }
+        
+    .menu-checkbox:checked + .burger-menu span:nth-child(1) { transform: translateY(10px) rotate(45deg); }
+    .menu-checkbox:checked + .burger-menu span:nth-child(2) { opacity: 0; }
+    .menu-checkbox:checked + .burger-menu span:nth-child(3) { transform: translateY(-10px) rotate(-45deg); }
+}
+
+/* ==========================================================================
+   7. SEARCH
+   ==========================================================================
+   ASSUMES: --header-height, --search-left (desktop box hangs from
+   header.png's bottom edge); viewport anchoring on mobile (section 5).
+   ========================================================================== */
+
+/* Search bar */
+@media(min-width:1016px) {
+  div#search {
+    position: absolute;
+    top: var(--header-height);  /* bottom edge of header.png */
+    left: var(--search-left);
+    height: 25px;
+    vertical-align: top;
+  }
+}
+
+@media(max-width:1015px) {
+  div#search {
+    position: absolute;
+    left: 25px;  /* mobile toolbar offset; anchors to the viewport */
+    height: 25px;
+  }
+}
+
+div#search input {
+  color: CanvasText !important;
+}
+div#search input[type=search],
+div#search input[type=text] {
+  display: block;
+  padding: 2px;
+  margin: 0px;
+  height: 25px;
+  width: 132px;
+  line-height: 20px;
+  border: solid #808080 1px;
+  background-color: Canvas;
+  border-radius: 5px;
+  margin-right: 5px;
+  text-indent: 0.5rem;
+}
+
+/* ==========================================================================
+   8. SIDEBAR WIDGETS (calendar, tags, featured, open erfas)
+   ==========================================================================
+   ASSUMES: right-column geometry from section 5; div.main_navigation h2
+   also picks up the grouped border rule below.
+   COLLISION SET (order preserved verbatim): the grouped h2 border rule,
+   then the same-specificity div#frontpage_calendar h2 override
+   (border-top: none), then the min-width block that re-adds a border-top
+   for desktop. Moving the override above the group rule would grow a
+   border on the calendar heading.
+   ========================================================================== */
 
 div#frontpage_calendar {
   display: none;
@@ -246,7 +571,7 @@ div#open_erfas_today .event_time {
   color: color-mix(in srgb, CanvasText, #808080);
 }
 
-@media(max-width:1016px) {
+@media(max-width:1015px) {
   div#tags li {
     list-style-type: none;
     display: inline-block;
@@ -278,6 +603,8 @@ div#frontpage_calendar ul, div#tags ul, div#featured_articles ul, div#open_erfas
   line-height: 1.5em;
 }
 
+/* ODDITY, kept: per-widget icon paddings — delete when these icons rotate
+   out of the featured box */
 div#featured_articles #ds_icon img {
   padding-top: 10px;
 }
@@ -312,302 +639,74 @@ div#featured_articles img {
   filter: grayscale(1);
 }
 
-dt {
-  font-weight: bold;
-  margin-bottom: 1em;
-}
-
-dd {
-  margin-bottom: 1em;
-}
-
-/*--------------------------------------------------------------*/
-
-div.author_and_date {
-  font-style: italic;
-  font-family: Georgia;
-  color: color-mix(in srgb, CanvasText, #808080);
-  padding-top: .2rem;
-  padding-bottom: .8rem;
-}
-
-@media(min-width:1016px) {
-  div#left_column::before {
-        content: " ";
-        position: absolute;
-        left: 0;
-        top: 0;
-        width: 100%;
-        height: 100%;
-        box-sizing: border-box;
-    background-image: url(/images/left_column.png);
-    background-position: top right;
-    background-repeat: no-repeat;
-        z-index: -10;
-  }
-  div#left_column {
-    position: absolute;
-    left: 0px;
-    width: 135px;
-    min-height: 100px;
-    text-align: right;
-    padding-right: 50px;
-  }
-
-  div#left_column > a {
-    font-size: 0.8rem;
-  }
-}
-
-.menu-checkbox {
-    display: none;
-}
-
-.burger-menu {
-    display: none;
-    cursor: pointer;
-}
-
-#burger-div {
-    position: absolute;
-    right: 54px;
-}
-
-/* Mobile styles */
-@media (max-width: 1016px) {
-    .burger-menu {
-                position: absolute;
-                display: flex;
-                flex-direction: column;
-                transition: transform 0.3s ease, opacity 0.3s ease;
-        }
-        
-        .burger-menu span {
-            display: inline-flex;
-        width: 26px;
-        height: 4px;
-        background: color-mix(in srgb, CanvasText, #808080 25%);
-        border-radius: 2px;
-        margin: 3px 0;
-            transition: max-height 0.5s ease-in-out, opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
-    }
-
-        #left_column .main_navigation {
-                width: 100%;
-        position: relative;
-        }
-
-    #toolbox ~ #left_column .main_navigation ul {
-        transition: max-height 0.2s ease-in-out, transform 0.4s ease-in-out, opacity 0.4s ease;
-        overflow: hidden;
-        text-align: center;
-    }
-
-    #toolbox ~ #left_column .main_navigation:first-of-type ul {
-            transform: translateY(-200px);
-        max-height: 0;
-                opacity: 0;
-        z-index: -10;
-    }
-    
-    /* Show menu when checkbox is checked */
-    #toolbox:has(.menu-checkbox:checked) ~ #left_column .main_navigation ul {
-        max-height: 400px;
-        opacity: 1;
-        transform: translateY(0);
-    }
-        
-    .menu-checkbox:checked + .burger-menu span:nth-child(1) { transform: translateY(10px) rotate(45deg); }
-    .menu-checkbox:checked + .burger-menu span:nth-child(2) { opacity: 0; }
-    .menu-checkbox:checked + .burger-menu span:nth-child(3) { transform: translateY(-10px) rotate(-45deg); }
-}
-
-div#center_column {
-  padding-bottom: 40px;
-}
-
-@media(max-width: 1016px) {
-div#center_column {
-  padding: 0 15px 40px 15px;
-}
-}
-
-@media(min-width: 1016px) {
-  div#center_column {
-    position: absolute;
-    background-color: Canvas;
-    left: 200px;
-    width: 490px;
-  }
-}
-
-@media(min-width:1016px) {
-  div#right_column {
-    position: absolute;
-    background-color: Canvas;
-    padding-left: 55px;
-    left: 690px;
-    width: 155px;
-    height: 100px;
-  }
-}
-
-div.teaser_ruler {
-  border-top: 1px solid #CCCCCC;
-  border-bottom: 1px dashed #CCCCCC;
-  height: 3px;
-  margin-top: 30px;
-}
-
-div.article_partial {
-  margin-bottom: 30px;
-}
-
-
-div.article_partial p.excerpt {
-  color: CanvasText;
-}
-
-/* Search bar */
-@media(min-width:1016px) {
-  div#search {
-    position: absolute;
-    top: 145px;
-    left: 676px;
-    height: 25px;
-    vertical-align: top;
-  }
-}
-
-@media(max-width:1016px) {
-  div#search {
-    position: absolute;
-    left: 25px;
-    height: 25px;
-  }
-}
-
-div#search input {
-  color: CanvasText !important;
-}
-div#search input[type=search],
-div#search input[type=text] {
-  display: block;
-  padding: 2px;
-  margin: 0px;
-  height: 25px;
-  width: 132px;
-  line-height: 20px;
-  border: solid #808080 1px;
-  background-color: Canvas;
-  border-radius: 5px;
-  margin-right: 5px;
-  text-indent: 0.5rem;
+#tags ul li {
+    margin-block-start: 0.5rem;
+    margin-block-end: 0.5rem;
 }
 
-/* Header */
-#header img,
-#header > a {
-  display: block;
-  line-height: 0;
-}
+/* ==========================================================================
+   9. ARTICLE CONTENT
+   ==========================================================================
+   ASSUMES: center-column geometry from section 5; TinyMCE emits the
+   inline-image classes (style-src unsafe-inline in the CSP exists partly
+   for its img[style] output).
+   ========================================================================== */
 
 /* Main section */
 .article, .article_partial {
   text-align: left;
 }
 
-h1, h2, h3 {
-  word-wrap: anywhere;
-  hyphens:auto;
-}
-
-.pagination {
-  margin-bottom: .5rem;
-}
-
-li {
-    line-height: 1.5rem;
-    margin-block-start: 1rem;
-    margin-block-end: 1rem;
-}
-
-#tags ul li {
-    margin-block-start: 0.5rem;
-    margin-block-end: 0.5rem;
-}
-
-/* Footer */
-#footer {
-  border-bottom: 2px solid #aeadad;
-  border-top: 2px solid #aeadad;
-  bottom: 0;
+div#center_column h2 a {
   color: CanvasText;
+  text-decoration: none;
 }
 
-#footer > br {
-  display: none;
+div#center_column h2 a:hover {
+  color: color-mix(in srgb, CanvasText, #808080 50%);
 }
 
-#footer p {
-  margin: .5rem auto;
+div#center_column h2.headline {
+  margin-top: 10px;
 }
 
-#footer a {
-  margin-left: 1rem;
-  margin-right: 1rem;
-  color: CanvasText;   
+div#center_column .article_partial h2.headline {
+  padding-top: 30px;
+  margin-bottom: 0.3rem;
+  border-top: 2px solid #cccccc;
 }
 
-@media(max-width:1016px) {
-#toolbox {
-    display: relative;
-    height: 30px;
-}
+/* except for erfa list */
+div#center_column .chapter_partial h2.headline {
+  border-top: none;
 }
 
-/* Light and dark mode button magic */
-@media(max-width:1016px) {
-  div#light-mode-div {
-    position: absolute;
-    left: 170px;
-  }
+div.article_partial h2 a {
+  text-decoration: none;
 }
 
-@media(min-width:1016px) {
-  div#light-mode-div {
-    position: absolute;
-    top: 145px;
-    left: 816px;
-  }
-}
-input#light-mode[type="checkbox"] {
-    display: none;
+div.article_partial {
+  margin-bottom: 30px;
 }
 
-label[for=light-mode] {
-    font-size: 25px;
-    user-select: none;
-    cursor: pointer;
-    filter: grayscale(1) contrast(10%);
-}
 
-.hide-me {
-    display: none;
+div.article_partial p.excerpt {
+  color: CanvasText;
 }
 
-/* Temporary glowing style for easterhegg 22 */
-#eh22_icon img {
-  animation: animate 3s linear infinite;
+div.author_and_date {
+  font-style: italic;
+  font-family: Georgia;
+  color: color-mix(in srgb, CanvasText, #808080);
+  padding-top: .2rem;
+  padding-bottom: .8rem;
 }
 
-@keyframes animate {
-  from {
-    filter: sepia(100%) hue-rotate(0deg);
-  }
-  to {
-    filter: sepia(100%) hue-rotate(360deg);
-  }
+div.teaser_ruler {
+  border-top: 1px solid #CCCCCC;
+  border-bottom: 1px dashed #CCCCCC;
+  height: 3px;
+  margin-top: 30px;
 }
 
 .chapter_partial_layout {
@@ -648,3 +747,11 @@ label[for=light-mode] {
   float: right;
   margin-left: 1rem;
 }
+
+#asset_credits .glightbox-desc {
+  display: none;
+}
+
+#asset_credits .headline_credit {
+  display: block;
+}