/* Photolog — overrides on top of the base stylesheet (unlayered, so they win). */
:root {
    --pl-bg: #f4f4f4;
    --pl-card: #fdfdfd;
    --pl-text: #1a1a1a;
    --pl-muted: #666;
    --pl-line: #e6e6e6;
}
body {
    background-color: var(--pl-bg);
    color: var(--pl-text);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    margin: 0;
    padding: 1.5rem 1rem 3rem 1rem;
}
/* The page itself is a rounded card. */
header#mast,
div#main {
    box-sizing: border-box;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
    background-color: var(--pl-card);
    border-left: 1px solid var(--pl-line);
    border-right: 1px solid var(--pl-line);
}
header#mast {
    display: flex;
    flex-flow: row wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem 1.5rem;
    padding: 1.25rem 1.5rem;
    text-align: start;
    background-color: var(--pl-card);
    border-top: 1px solid var(--pl-line);
    border-bottom: 1px solid var(--pl-line);
    border-radius: 14px 14px 0 0;
}
header#mast h1.banner {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
header#mast nav { margin: 0; }
header#mast ul.navigation {
    display: flex;
    flex-flow: row wrap;
    gap: 0.25rem 1.1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
header#mast ul.navigation > li { display: block; }
header#mast ul.navigation > li > a {
    display: inline;
    margin: 0;
    font-size: 0.85rem;
    color: var(--pl-muted);
}
header#mast ul.navigation > li > a:hover,
header#mast ul.navigation > li > a:focus { color: var(--pl-text); text-decoration: underline; }
div#main {
    padding: 1.25rem 1.5rem 1.5rem 1.5rem;
    border-bottom: 1px solid var(--pl-line);
    border-radius: 0 0 14px 14px;
}
div#main > article,
div#main > .standalone {
    max-width: none;
    padding: 0;
    margin: 0;
}
div#main > article.commentary,
div#main > article.discourse {
    max-width: 780px;
}
hr.post { display: none; }

/* Post: date, photo, title, caption, tags */
.post_date {
    font-size: 0.78rem;
    letter-spacing: 0.03em;
    color: var(--pl-muted);
    margin: 0 0 0.75rem 0;
}
section.photo {
    margin: 0;
    text-align: center;
}
section.photo img,
section.photo img.image {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: 82vh;
    object-fit: contain;
    margin: 0 auto;
    border-radius: 14px;
}
h2.post_title {
    margin: 1rem 0 0.25rem 0;
    font-size: 1.1rem;
    font-weight: 600;
    text-align: start;
}
h2.post_title a:link, h2.post_title a:visited { color: var(--pl-text); }
section.caption {
    margin: 0.25rem 0 0 0;
    color: var(--pl-muted);
    font-size: 1rem;
}
section.caption p:first-child { margin-top: 0; }
article > footer { margin-top: 0.5rem; }
div.tags {
    margin: 0.5rem 0 0 0;
    font-size: 0.78rem;
    gap: 0 0.6rem;
}
div.tags a.tag,
div.tags a.tag:link,
div.tags a.tag:visited {
    display: inline;
    top: 0;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    background: none;
    color: var(--pl-muted);
}
div.tags a.tag::before { content: "#"; }
div.tags a.tag:hover { color: var(--pl-text); text-decoration: underline; }

/* Newer (left) / older (right) */
nav.pager {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin: 1.5rem 0 0 0;
    padding: 1rem 0 0 0;
    border-top: 1px solid var(--pl-line);
    font-size: 0.95rem;
}
nav.pager a { color: var(--pl-text); }
nav.pager .pager_older { text-align: end; }

/* Comments */
article.commentary { margin-top: 1.5rem; }
article.commentary h3 {
    font-size: 0.9rem;
    font-weight: 400;
    color: var(--pl-muted);
    margin: 0 0 0.75rem 0;
}
ol.comments { border-bottom: none; }
ol.comments > li {
    padding: 1rem 1.25rem;
    background-color: var(--pl-bg);
    border: 1px solid var(--pl-line);
    border-radius: 10px;
    margin: 0 0 0.75rem 0;
}
ol.comments > li.comment_form { background-color: transparent; border: none; padding: 0.5rem 0; }
section.comment h4 { margin: 0 0 0.5rem 0; font-size: 0.9rem; }
section.comment p:last-child { margin-bottom: 0; }
div.metadata { margin-top: 0.5rem; padding: 0; background: none; border: none; font-size: 0.75rem; text-align: start; color: var(--pl-muted); }
div.doaction a, button {
    background-color: var(--pl-text);
    border-color: var(--pl-text);
    border-radius: 8px;
}
div.doaction a:hover, button:hover { background-color: #444; border-color: #444; }

/* Other pages (archive, tags, search…) keep the same card */
div.standalone, ul.archive { max-width: none; }

@media (max-width: 600px) {
    body { padding: 0; }
    header#mast, div#main { border-radius: 0; border-left: none; border-right: none; }
    header#mast, div#main { padding-left: 1rem; padding-right: 1rem; }
    section.photo img { border-radius: 10px; }
}
@media (prefers-color-scheme: dark) {
    :root { --pl-bg: #151515; --pl-card: #1d1d1d; --pl-text: #ececec; --pl-muted: #9a9a9a; --pl-line: #2c2c2c; }
    a:link, a:visited { color: var(--pl-text); }
    ol.comments > li { background-color: #242424; }
    input, textarea, select { background-color: #242424; color: var(--pl-text); border-color: #3a3a3a; }
    div.doaction a, button { color: #111; background-color: var(--pl-text); }
}