/* Must stay at the very top of this file — @import only works as the first rule.
   Loads Noto Sans (regular/bold, upright/italic) so extended Latin characters
   such as macrons (Gita, Prabhupada) render instead of falling back to tofu. */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap');

/* ============================================================
   GLOBAL BASE STYLES
   Layout, typography, and utilities shared by all pages.
   ============================================================ */

body {
    margin: 0;
    padding: 0;
    max-width: 100%;
    margin-top: 60px; /* offset for fixed topbar */
    background-color: #36a7c4;
}

.topbar {
    width: 100%;
    height: 60px;
    background: #222;
    color: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    position: fixed;
    top: 0;
    left: 0;
}

.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 200px;
    height: 100%;
    background-color: #36a7c4;
    padding-top: 20px;
    box-shadow: 1px 0 0 #36a7c4;
}

.sidebar ul {
    list-style-type: none;
    padding: 0;
}

.sidebar li {
    margin: 15px 0;
}

.sidebar a {
    text-decoration: none;
    color: #333;
    padding: 8px 16px;
    display: block;
}

.sidebar a:hover {
    background-color: #34136c;
}

.content {
    margin-left: 200px; /* match sidebar width */
    padding: 20px;
}


h1, h2, h3, h4, h5 {
    color: black;
    font-family: "Noto Sans", Verdana, Geneva, Tahoma,  sans-serif;
    font-weight: normal;
    line-height: 1.5;
    margin: 0.5em 0;
    text-align: center;
}

h1 {
    font-size: 150%;
    margin: 0.6em 0;
    letter-spacing: 0.05em;
    word-spacing: 0.2em;
}

h2 {
    font-size: 140%;
    margin: 2em 0 1em;
}

h3 {
    font-size: 130%;
    margin: 0.6em 0;
    letter-spacing: 0.05em;
    word-spacing: 0.2em;
}

h4 {
    font-size: 120%;
    margin: 0.6em 0;
    letter-spacing: 0.05em;
    word-spacing: 0.2em;
}

h5 {
    font-size: 110%;
    margin: 0.6em 0;
    letter-spacing: 0.05em;
    word-spacing: 0.2em;
}

p {
    font-size: 130%;
    line-height: 1.6;
    margin: 0.5em 0.25em;
    padding: 0 5%;
    text-align: left;
    text-indent: 1.75em;
}

p.center {
    text-align: center;
    text-indent: 0;
}

p.right {
    text-align: right;
}

dt {
    font-weight: bold;
    margin-bottom: 0.5em;
}

dd {
    font-weight: normal;
    font-size: 150%;
    margin-bottom: 0.8em;
}

ol {
    font-size: 130%;
    font-family: Verdana, Geneva, Tahoma, "Noto Sans", sans-serif;
    line-height: 1.8;
}

a:link, a:visited {
    color: black;
    font-family: Verdana, Geneva, Tahoma, "Noto Sans", sans-serif;
    font-size: 90%;
    font-weight: normal;
    text-decoration: none;
}

a:hover {
    color: #34136c;
}

#pg-footer div.agate {
    font-size: 90%;
    text-align: center;
    margin: 0 auto;
}

body.custom-page h1,
body.custom-page h2,
body.custom-page h3,
body.custom-page h4,
body.custom-page h5 {
    text-align: left !important;
}

body.custom-page p {
    text-align: left !important;
}

body.custom-page .poem,
body.custom-page .stanza,
body.custom-page .stanza-number {
    text-align: left !important;
}

.centered-list {
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}

.container {
    display: flex;
    justify-content: flex-start;
    gap: 20px;
}

.image-container {
    display: flex;
    justify-content: center;
    text-align: center;
    margin-right: 10px;
    vertical-align: top;
}

.image-container img {
    width: auto;
    height: auto;
    max-width: 100%;
}

.image-box {
    display: inline-block;
    text-align: center;
    vertical-align: top;
}

.image-box img {
    display: block;
    margin: 0 auto;
    float: none;
}

.image-box h4 {
    margin: 0.5em 0 0;
    text-align: center;
    display: block;
}

.image-box a {
    text-decoration: none;
    color: inherit;
}

.grid-container {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 10px;
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px;
}

.grid-container .image,
.grid-container .camera-details,
.grid-container .title,
.grid-container .description {
    background-color: #36a7c4;
    padding: 20px;
    border: 0 solid #ddd;
    border-radius: 8px;
}

.grid-container .image img {
    width: 100%;
    height: auto;
}

.poem {
    display: block;
    text-align: left;
    max-width: 1000px;
    margin: 0 auto;
    padding: 1em;
    font-size: 130%;
    line-height: 1.5;
}

.poem .stanza {
    display: block;
    margin: 0 auto 20px;
    max-width: 100%;
    text-align: left;
}

.poem .stanza.centered {
    text-align: center;
}

table {
    table-layout: auto;
}

.table-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
}

.my-table {
    border-collapse: collapse;
    border: 2px solid black;
}

.my-table td,
.my-table th {
    border: 2px solid black;
    padding: 0;
    text-align: center;
    vertical-align: middle;
    text-indent: 0;
}

.my-table p {
    text-indent: 0;
    font-family: Verdana, Geneva, Tahoma, "Noto Sans", sans-serif;
    font-size: 90%;
}

.my-table img {
    width: 150px;
    height: auto;
    display: block;
}

.hover-container {
    position: relative;
    display: inline-block;
}

.hover-text {
    display: none;
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.85);
    color: white;
    padding: 12px 16px;
    border-radius: 6px;
    font-size: 14px;
    line-height: 1.5;
    width: 400px;
    z-index: 10;
    text-align: left;
}

.hover-container:hover .hover-text {
    display: block;
}

[id] {
    scroll-margin-top: 50vh;
}

@media screen and (max-width: 768px) {
    .container {
        flex-direction: column;
        gap: 10px;
    }

    .image-container img,
    .grid-container {
        max-width: 100%;
    }

    .grid-container {
        grid-template-columns: 1fr;
    }
}

/* Images */
img {
    border: 5px solid black;
    padding: 0;
    box-sizing: border-box;
}

img:hover {
    border-color: #34136c;
}

/* Latin motto link */
h1[lang="la"] a {
    color: black;
    font-style: italic;
}

h1[lang="la"] a:hover {
    color: #34136c;
}

/* Dark mode toggle button */
#darkModeToggle {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
    background-color: #36a7c4;
    color: black;
    border: none;
    border-radius: 20px;
    padding: 8px 16px;
    font-family: Verdana, Geneva, Tahoma, "Noto Sans", sans-serif;
    font-size: 90%;
    cursor: pointer;
}

#darkModeToggle:hover {
    background-color: #34136c;
    color: white;
}

/* Dark mode */
body.dark-mode {
    background-color: #123740;
}

body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5 {
    color: #0fa6a8;
}

body.dark-mode p {
    color: #0fa6a8;
}

body.dark-mode a:link,
body.dark-mode a:visited {
    color: #0fa6a8;
}

body.dark-mode a:hover {
    color: #36a7c4;
}

body.dark-mode .grid-container .description {
    background-color: #123740;
}

body.dark-mode img {
    border-color: #0fa6a8;
}

body.dark-mode img:hover {
    border-color: #0d6b80;
}

body.dark-mode .sidebar {
    background-color: #0d2b33;
}

body.dark-mode h1[lang="la"] a {
    color: #0fa6a8;
}

body.dark-mode #darkModeToggle {
    background-color: #0fa6a8;
    color: #123740;
}

body.dark-mode #darkModeToggle:hover {
    background-color: #36a7c4;
    color: #123740;
}

/* ============================================================
   TWENTY-FIVE JOURNAL — 2025 Frozen Style
   ============================================================ */

body.twentyFiveJournal {
    background-color: #D0D6B3;
}

body.twentyFiveJournal img {
    border: 0 solid black;
    padding: 0;
    box-sizing: border-box;
}

body.twentyFiveJournal img:hover {
    border-color: black;
}

body.twentyFiveJournal h1[lang="la"] a {
    color: black;
    font-style: normal;
}

body.twentyFiveJournal h1[lang="la"] a:hover {
    color: #34136c;
}


/* ============================================================
   TWENTY-SIX JOURNAL — 2026 Frozen Style
   Add frozen rules here at end of 2026 to lock in that year's look.
   ============================================================ */
   body.twentySixJournal {
    margin: 0;
    padding: 0;
    max-width: 100%;
    margin-top: 60px; /* offset for fixed topbar */
    background-color: #36a7c4;
}
   /* ============================================================
     Testing
   ============================================================ */

    body.test {
        margin-top: 100px; /* offset for fixed topbar */
        background-color: #bfac84;
   }

    body.test .sidebar {
        background-color: #bfac84;
        box-shadow: 1px 0 0 #bfac84;
}

    body.test p {
        font-family: Georgia, "Times New Roman", serif;
        font-size: 100%;
        line-height: 1.3;
        margin: 0.5em 0.25em;
        padding: 0 5%;
        text-align: left;
        text-indent: 2em;
}

    a:link, a:visited {
        color: black;
        font-family: Georgia, "Times New Roman", serif;
        font-size: 100%;
        font-weight: normal;
        text-decoration: none;
    }

    body.test a:hover {
        color: #703e33;
        font-family: Georgia, "Times New Roman", serif;
}

/* ============================================================
   BENCH — full-width layout for pages read on a phone at the bench
   journal/rangefinder_repair/zorki_1.html has no sidebar,
   so the 200px gutter .content reserves for one is dead space. On a
   375px screen that is over half the width. Added 19 Aug 2026.
   Put class="current bench" on <body> to use it.
   ============================================================ */
body.bench .content {
    margin-left: auto;   /* no sidebar on this page — reclaim the gutter */
    margin-right: auto;
    max-width: 1100px;   /* keeps the line length sane on a desktop; */
    padding: 20px;       /* on a phone the viewport is the limit */
}

body.bench .grid-container,
body.bench .image-container {
    max-width: 100%;
}

/* Reserve each photo's box before the file arrives, 21 Aug 2026.
   Every <img> now carries its real 1080x810 as width/height attributes,
   which the browser turns into an aspect-ratio — but ONLY if the width
   resolves to something definite. The base rule .image-container img
   sets width:auto, and an unloaded image has zero intrinsic width, so
   with auto the height collapsed to nothing and the attributes bought
   us exactly zero. width:100% is what makes the ratio bite. Without
   this, photos above an anchor loaded *after* a jump and shoved the
   target down the page — measured over 1000px of drift at 768px.
   Do not put width:auto back on this page. */
body.bench img {
    max-width: 100%;
    height: auto;
}

body.bench .image-box img {
    width: 100%;
    height: auto;
}

/* Glossary entries can carry two or three reference frames side by side.
   Let them wrap instead of shrinking off the edge. The flex-basis is what
   makes pairs sit side by side on a desktop: without it each box sizes to
   the photo's natural 1080px and takes a whole row to itself. */
body.bench .image-container {
    flex-wrap: wrap;
    gap: 12px;
    margin-right: 0;
}

body.bench .image-box {
    flex: 1 1 300px;
    max-width: 100%;
}

/* Phone: reclaim the side padding too. */
@media screen and (max-width: 768px) {

    body.bench .content {
        padding: 12px 10px 84px;   /* foot reserved for the fixed nav bar */
    }

    body.bench .grid-container {
        padding: 8px 0;
        gap: 8px;
    }

    body.bench .grid-container .description {
        padding: 12px 10px;
    }

    /* One frame per row on a phone — two side by side is ~180px each,
       too small to read the detail the caption is pointing at. */
    body.bench .image-box {
        flex: 1 1 100%;
    }

    /* Checkbox targets big enough for a finger with gloves on. */
    body.bench input[type="checkbox"] {
        width: 22px;
        height: 22px;
        vertical-align: -4px;
        margin-right: 8px;
    }
}

/* ------------------------------------------------------------
   Glossary titles link forward to the step where that part goes
   back into the camera, 21 Aug 2026. The dotted underline is the
   only affordance — a heading that is also a link looks like neither
   otherwise, and there is no hover on a phone to discover it with.
   ------------------------------------------------------------ */
body.bench .description h3 a.g-jump {
    color: inherit;
    font: inherit;
    text-decoration: none;
    border-bottom: 1px dotted rgba(0, 0, 0, 0.55);
}

body.bench .description h3 a.g-jump:hover {
    color: #12454f;
    border-bottom-style: solid;
    border-bottom-color: #12454f;
}

/* ------------------------------------------------------------
   Table of contents at the head of the page, 21 Aug 2026. Two
   levels: the four parts, each with its own subsections. Scrolls
   away with the page — unlike the bar at the foot it is not meant
   to stay in view.
   ------------------------------------------------------------ */
body.bench .toc-box {
    margin: 18px 0 26px;
    padding: 14px 16px 16px;
    border: 1px solid #c8c8c8;
    border-radius: 10px;
    background-color: #f4f4f2;
}

body.bench .toc-box h4 {
    margin: 0 0 8px;
}

body.bench .toc,
body.bench .toc ul {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: left;
}

body.bench .toc > li {
    margin: 0 0 8px;
}

/* Second level is indented behind a rule, so the four parts stay
   readable as the top level on a narrow screen. */
body.bench .toc ul {
    margin: 2px 0 0 12px;
    padding-left: 6px;
    border-left: 2px solid #d6d6d4;
}

body.bench .toc a {
    display: block;
    padding: 7px 10px;
    border-radius: 5px;
    color: #222222;
    font-family: "Noto Sans", Verdana, Geneva, Tahoma, sans-serif;
    font-size: 94%;
    line-height: 1.3;
    text-decoration: none;
}

body.bench .toc > li > a {
    font-size: 100%;
    font-weight: bold;
}

/* Darker than the page's own #36a7c4 ground, same as the bibliography. */
body.bench .toc a:hover {
    background-color: #1d7f97;
    color: #ffffff;
}

body.dark-mode.bench .toc-box {
    background-color: #12333b;
    border-color: #2c4048;
}

body.dark-mode.bench .toc a {
    color: #cfe6ec;
}

body.dark-mode.bench .toc ul {
    border-left-color: #2c4048;
}

@media screen and (max-width: 768px) {

    body.bench .toc a {
        padding: 9px 10px;
    }

}

/* ------------------------------------------------------------
   Bottom navigation bar, 21 Aug 2026. Replaces the plain text
   "Back to the top" link that used to close the page. Deliberately
   NOT fixed to the viewport: at the bench the screen is small and a
   floating bar would cover the step being read.
   ------------------------------------------------------------ */
body.bench .bench-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    margin: 0;
    padding: 8px 12px;
    border: 0;
    border-top: 1px solid #b4b4b2;
    border-radius: 0;
    background-color: #f4f4f2;
    box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.18);
    text-align: center;
}

/* Pinned to the viewport as of 21 Aug 2026 so the jump to the top is
   reachable from anywhere in a 56,000px document — it was in normal flow
   before, which meant scrolling all the way to the bottom to use it.
   Being out of flow, it will sit on top of the last lines of the page
   unless the foot is reserved. Keep this padding and the bar's height in
   step. The photo pop-up is z-index 1000 and still covers the bar. */
body.bench .content {
    padding-bottom: 84px;
}

body.bench .bench-nav a.bench-nav-top {
    display: block;
    padding: 11px 16px;
    border: 1px solid #36a7c4;
    border-radius: 8px;
    background-color: #36a7c4;
    color: #ffffff;
    font-family: "Noto Sans", Verdana, Geneva, Tahoma, sans-serif;
    font-size: 105%;
    font-weight: bold;
    line-height: 1.2;
    text-decoration: none;
}

body.bench .bench-nav a.bench-nav-top:hover {
    background-color: #1d7f97;
    border-color: #1d7f97;
}

body.dark-mode.bench .bench-nav {
    background-color: #12333b;
    border-color: #2c4048;
}

@media screen and (max-width: 768px) {

    body.bench .bench-nav {
        padding: 7px 8px;
    }

}

/* ------------------------------------------------------------
   Bibliography at the foot of the page, 21 Aug 2026. Each entry is
   a whole-row link so the tap target is the row, not the few words
   of the title — the list is read on a phone at the bench.
   ------------------------------------------------------------ */
body.bench .bib {
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
    text-align: left;
}

body.bench .bib li {
    margin: 0 0 6px;
    padding: 0;
}

body.bench .bib a {
    display: block;
    padding: 10px 12px;
    border: 1px solid #d2d2d2;
    border-radius: 6px;
    background-color: #fafaf8;
    color: #222222;
    font-family: "Noto Sans", Verdana, Geneva, Tahoma, sans-serif;
    font-size: 95%;
    line-height: 1.35;
    text-decoration: none;
}

/* Darker than the page's own #36a7c4 ground — hovering must not make
   the row blend into the background behind it. */
body.bench .bib a:hover {
    background-color: #1d7f97;
    border-color: #1d7f97;
    color: #ffffff;
}

/* Page count, citation key and the one-line note on what the source
   is good for. Sits under the title inside the same link. */
body.bench .bib .bib-note {
    display: block;
    margin-top: 3px;
    font-size: 88%;
    opacity: 0.8;
}

body.dark-mode.bench .bib a {
    background-color: #0d2b33;
    border-color: #2c4048;
    color: #cfe6ec;
}

/* ============================================================
   ALBUM — layout for journal/album.html
   The page has a real .sidebar of 15 section links. Its markup was
   wrapped in a .content div on 19 Aug 2026 so the base
   .content { margin-left: 200px } gutter clears the sidebar at every
   viewport width — before that nothing was indented away from it and
   the fixed bar overlapped the album below about 1400px.
   On a phone the sidebar drops out of fixed position and becomes a
   wrapping row of jump links across the top, and the album flows full
   width underneath. Added 19 Aug 2026.
   Put class="current album" on <body> to use it.
   ============================================================ */
@media screen and (max-width: 768px) {

    /* Sidebar is in normal flow down here, so the gutter is dead space. */
    body.album .content {
        margin-left: 0;
        padding: 12px 10px 32px;
    }

    body.album .sidebar {
        position: static;
        width: auto;
        height: auto;
        padding: 10px 8px;
        box-shadow: none;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 6px;
    }

    body.album .sidebar h5 {
        margin: 0;
    }

    body.album .sidebar h5 a {
        display: block;
        padding: 7px 11px;
        background-color: rgba(255, 255, 255, 0.35);
        border-radius: 14px;
        font-size: 90%;
        white-space: nowrap;
    }

    body.album .grid-container {
        padding: 8px 0;
    }

    body.album .image-container,
    body.album .image-box,
    body.album img {
        max-width: 100%;
        height: auto;
    }
}

/* ============================================================
   EVERGREEN — House & Property Reference color scheme
   The palette for journal/evergreen.html lives here so it can be
   recolored from this stylesheet. Edit the values below and the whole
   evergreen page updates. (The page's layout rules still live in its
   own <style> block, but they all reference these variables.)
   ============================================================ */
body.evergreen {
    /* --- core palette --- */
    --paper:       #f3f5ef;  /* page background           */
    --ink:         #1c2620;  /* body text                 */
    --ink-soft:    #48564c;  /* muted / caption text      */
    --line:        #bcc7b4;  /* borders & rules           */
    --line-soft:   #e3e8dd;  /* faint table row lines      */
    --panel:       #ffffff;  /* card background           */
    --accent:      #2f5d3e;  /* primary green             */
    --accent-soft: #d8e4d2;  /* pale green fill           */
    --accent-dark: #254a31;  /* darker green (button hover)*/
    --on-accent:   #ffffff;  /* text on green backgrounds  */
    --stamp:       #b3503f;  /* rust accent / stamps      */
    --stamp-soft:  #f6e4e0;  /* pale rust fill (TODO tag)  */

    /* --- sidebar --- */
    --sidebar-bg:          #1b2a20;               /* sidebar background    */
    --sidebar-ink:         #e7eadf;               /* sidebar text          */
    --sidebar-muted:       #a9c2ae;               /* sidebar section labels */
    --sidebar-placeholder: #8ba392;               /* search placeholder    */
    --sidebar-rule:        rgba(231,234,223,.25); /* sidebar divider line  */
    --nav-link:            #cfdccb;               /* nav links             */
    --nav-hover-bg:        #2c4233;               /* nav link hover fill   */
    --search-bg:           #243529;               /* search box background */
    --search-border:       #3c5245;               /* search box border     */

    /* --- fonts --- */
    --mono: "IBM Plex Mono","Courier New",monospace;
    --sans: "IBM Plex Sans","Segoe UI",Arial,sans-serif;
    --serif:"IBM Plex Serif",Georgia,serif;
}

/* ============================================================
   TRIUMPH — Bonneville T100 Maintenance & Repair Reference
   The palette for journal/triumph/triumph.html lives here so it can be
   recoloured from this stylesheet. Edit the values below and the whole
   triumph page updates. (The page's layout rules still live in its own
   <style> block, but they all reference these variables.)
   Scheme: the CODEX HOUSE COLORS — the site's own cyan #36a7c4, deep purple
   #34136c, and #222 charcoal from the global rules at the top of this file,
   with Noto Sans as the body face. Chosen 2026-07-29 so this page reads as
   part of the codex rather than as its own thing.
   ============================================================ */
body.triumph {
    /* --- core palette --- */
    --paper:       #eaf6fa;  /* page background — pale cyan tint of #36a7c4 */
    --ink:         #1a1a1a;  /* body text                  */
    --ink-soft:    #4e5c61;  /* muted / caption text       */
    --line:        #a9cfdc;  /* borders & rules            */
    --line-soft:   #d8ebf2;  /* faint table row lines      */
    --panel:       #ffffff;  /* card background            */
    --accent:      #17697f;  /* deepened codex cyan — used wherever the colour
                                carries TEXT (headings, links, buttons, small
                                caps). The pure #36a7c4 only reaches ~2.6:1 on
                                white, which is unreadable at these sizes, so
                                the text weight of the hue is darkened here and
                                the exact site cyan is kept as --accent-mid. */
    --accent-mid:  #36a7c4;  /* THE site cyan, verbatim from the global rules —
                                used for the sidebar edge and timeline markers,
                                where it is decorative and carries no text    */
    --accent-soft: #d6eef5;  /* pale cyan fill             */
    --accent-dark: #0f4f60;  /* darker cyan (button hover) */
    --on-accent:   #ffffff;  /* text on deep-cyan backgrounds */
    --stamp:       #34136c;  /* codex deep purple / stamps */
    --stamp-soft:  #e6dff2;  /* pale purple fill (TODO tag)*/

    /* --- sidebar --- */
    --sidebar-bg:          #34136c;               /* deep purple sidebar    */
    --sidebar-ink:         #f0ecf7;               /* sidebar text           */
    --sidebar-muted:       #b9a8dc;               /* sidebar section labels */
    --sidebar-placeholder: #9686bd;               /* search placeholder     */
    --sidebar-rule:        rgba(240,236,247,.25); /* sidebar divider line   */
    --nav-link:            #ddd4ee;               /* nav links              */
    --nav-hover-bg:        #17697f;               /* cyan hover fill        */
    --search-bg:           #2a0f57;               /* search box background  */
    --search-border:       #4d2a8a;               /* search box border      */

    /* --- fonts — the codex face, per the global rules above --- */
    --mono: "Courier New",Courier,monospace;
    --sans: "Noto Sans",Verdana,Geneva,Tahoma,sans-serif;
    --serif:"Noto Sans",Verdana,Geneva,Tahoma,sans-serif;
}