/*
Theme Name: Marginalia
Description: A dark blog layout with the sidebar on the left and a slim floating footer.
Text Domain: marginalia
*/
@font-face { font-family: 'Bodoni Moda'; src: url('fonts/bodoni-moda-latin.woff2') format('woff2'); font-weight: 400 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Bodoni Moda'; src: url('fonts/bodoni-moda-latin-ext.woff2') format('woff2'); font-weight: 400 900; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+A720-A7FF; }

:root {
  --mgl-night: #190b0d; --mgl-stage: #261316; --mgl-card: #321b1e; --mgl-line: #513439;
  --mgl-ivory: #f2e6de; --mgl-mist: #b9a2a5; --mgl-rose: #ec657b; --mgl-rose-deep: #be2d47;
  --mgl-brass: #d0a74e; --mgl-brass-light: #eacd86; --mgl-brass-deep: #866327;
  --mgl-serif: 'Bodoni Moda', 'Bodoni 72', Didot, 'Times New Roman', serif;
  --mgl-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; padding-bottom: 3.2rem; font: 400 1.03rem/1.7 var(--mgl-sans); color: var(--mgl-ivory); background: var(--mgl-night); overflow-wrap: break-word; }
h1, h2, h3 { margin: 0 0 0.75rem; font-family: var(--mgl-serif); font-weight: 700; line-height: 1.18; }
p { margin: 0 0 1rem; }
a { color: var(--mgl-brass-light); }
a:hover { color: var(--mgl-rose); }
:focus-visible { outline: 3px solid var(--mgl-rose); outline-offset: 2px; }
code { padding: 0.05rem 0.3rem; font-size: 0.92em; background: var(--mgl-card); border-radius: 3px; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }
.skip-link:focus { clip: auto; width: auto; height: auto; left: 0.5rem; top: 0.5rem; z-index: 100; padding: 0.5rem 0.9rem; background: var(--mgl-card); }
.mgl-wrap { width: min(72rem, 100%); margin-inline: auto; padding-inline: clamp(1rem, 3vw, 1.75rem); }

/* Age bar across the top */
.mgl-agebar { display: none; }
.mgl-door .mgl-agebar { display: block; position: sticky; top: 0; z-index: 60; background: var(--mgl-card); border-bottom: 3px solid var(--mgl-brass); box-shadow: 0 0.6rem 1.6rem rgba(0, 0, 0, 0.6); }
.mgl-door #page { opacity: 0.35; filter: saturate(0.6); }
.mgl-note { position: absolute; z-index: 80; width: min(21rem, calc(100vw - 2rem)); padding: 0.85rem 1rem 0.9rem; color: var(--mgl-ivory); background: var(--mgl-stage); border: 1px solid var(--mgl-brass); border-left: 4px solid var(--mgl-brass); border-radius: 2px; box-shadow: 0 0.8rem 2rem rgba(0, 0, 0, 0.65); }
.mgl-note[hidden] { display: none; }
.mgl-note::before { content: ''; position: absolute; top: -0.5rem; left: var(--mgl-tip, 50%); margin-left: -0.5rem; border: 0.5rem solid transparent; border-top: 0; border-bottom-color: var(--mgl-brass); }
.mgl-note-up::before { top: auto; bottom: -0.5rem; border-bottom: 0; border-top: 0.5rem solid var(--mgl-brass); }
.mgl-note-h { margin: 0 0 0.3rem; font: 700 1.08rem/1.3 var(--mgl-serif); }
.mgl-note-num { display: inline-block; padding: 0 0.3rem; color: var(--mgl-night); background: var(--mgl-brass); font: 700 0.8rem/1.5 var(--mgl-sans); vertical-align: 0.12em; }
.mgl-note-p { margin: 0 0 0.75rem; color: var(--mgl-mist); font-size: 0.89rem; line-height: 1.5; }
.mgl-note-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin: 0; }
.mgl-note-yes { min-height: 2.75rem; }
.mgl-note-no { font-size: 0.88rem; color: var(--mgl-mist); }
.mgl-agebar-row { display: grid; gap: 0.6rem 1.2rem; padding-block: 0.9rem; align-items: center; }
@media (min-width: 48rem) { .mgl-agebar-row { grid-template-columns: auto minmax(0, 1fr) auto; } }
.mgl-agebar-badge { display: grid; place-items: center; width: 3.2rem; height: 3.2rem; margin: 0; font: 800 1.15rem/1 var(--mgl-serif); color: var(--mgl-night); background: var(--mgl-brass); border-radius: 50%; }
.mgl-agebar-text p { margin: 0 0 0.25rem; }
.mgl-agebar-rim { font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mgl-brass); }
.mgl-agebar-h { font: 700 1.2rem/1.25 var(--mgl-serif); }
.mgl-agebar-p, .mgl-agebar-small { font-size: 0.9rem; line-height: 1.5; color: var(--mgl-mist); }
.mgl-agebar-small { font-size: 0.82rem; }
.mgl-agebar-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; }
.mgl-agebar-no { font-size: 0.92rem; color: var(--mgl-mist); }

.mgl-strictline { display: none; }
html[data-wdr-counter='closed'] .mgl-strictline { display: block; margin: 0; padding: 0.5rem 1rem; font-size: 0.9rem; text-align: center; background: var(--mgl-stage); border-bottom: 1px solid var(--mgl-brass-deep); }

/* Header */
.site-header { background: var(--mgl-stage); border-bottom: 1px solid var(--mgl-line); }
.mgl-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1.5rem; padding-block: 0.9rem 0.6rem; }
.site-branding { display: flex; align-items: center; gap: 0.7rem; }
.custom-logo-link { display: inline-flex; }
.custom-logo { width: 2.4rem; height: 2.4rem; }
.site-title { margin: 0; font: 700 1.55rem/1.1 var(--mgl-serif); }
.site-title a { color: var(--mgl-ivory); text-decoration: none; }
.site-title span { color: var(--mgl-brass); }
.site-description { margin: 0.15rem 0 0; font-size: 0.85rem; color: var(--mgl-mist); }
.mgl-langs ul { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0; padding: 0; list-style: none; }
.mgl-langs a { display: inline-block; min-width: 2.2rem; padding: 0.2rem 0.4rem; font-size: 0.8rem; font-weight: 700; text-align: center; color: var(--mgl-mist); text-decoration: none; border: 1px solid var(--mgl-line); border-radius: 3px; }
.mgl-langs a:hover, .mgl-langs a[aria-current='page'] { color: var(--mgl-night); background: var(--mgl-brass); border-color: var(--mgl-brass); }
.main-navigation ul { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.main-navigation a { display: block; padding: 0.55rem 0.8rem; font-size: 0.93rem; color: var(--mgl-ivory); text-decoration: none; }
.main-navigation li:first-child a { padding-left: 0; }
.main-navigation a:hover, .main-navigation .current-menu-item > a { color: var(--mgl-brass-light); box-shadow: inset 0 -2px 0 var(--mgl-rose); }
.menu-toggle { display: none; margin: 0.4rem 0 0.6rem; padding: 0.4rem 0.9rem; font: 600 0.93rem/1 var(--mgl-sans); color: var(--mgl-ivory); background: var(--mgl-card); border: 1px solid var(--mgl-line); border-radius: 3px; cursor: pointer; }
@media (max-width: 59.99rem) {
  .js .menu-toggle { display: inline-block; }
  .js .main-navigation ul { display: none; }
  .js .main-navigation.toggled ul { display: block; padding-bottom: 0.4rem; }
  .js .main-navigation.toggled a { padding-left: 0; border-top: 1px solid var(--mgl-line); }
}

/* Sidebar left of the post on wide screens */
.site-content { padding-block: clamp(1.2rem, 3vw, 2.4rem); }
.mgl-layout { display: grid; gap: 2rem; }
@media (min-width: 60rem) {
  .mgl-layout { grid-template-columns: 16.5rem minmax(0, 1fr); grid-template-areas: 'side main'; align-items: start; }
  .site-main { grid-area: main; }
  .widget-area { grid-area: side; }
}
.site-main:focus { outline: none; }

/* Post */
.hentry { padding: clamp(1rem, 3vw, 2rem); background: var(--mgl-stage); border: 1px solid var(--mgl-line); }
.mgl-cat { margin: 0 0 0.4rem; font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mgl-rose); }
.entry-title { font-size: clamp(1.8rem, 5.6vw, 2.9rem); }
.entry-meta { margin: 0 0 1.2rem; font-size: 0.85rem; color: var(--mgl-mist); }
.mgl-lede { font-size: 1.12rem; }
.wp-block-buttons { display: flex; flex-wrap: wrap; gap: 0.8rem; margin: 0 0 0.8rem; }
.wp-block-button__link, .wp-element-button { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 2.8rem; padding: 0.55rem 1.3rem; font: 700 1rem/1.15 var(--mgl-sans); color: var(--mgl-night); background: var(--mgl-brass); border: 0; border-radius: 3px; text-decoration: none; cursor: pointer; }
.wp-block-button__link:hover, .wp-element-button:hover { color: var(--mgl-night); background: var(--mgl-brass-light); }
.is-style-mgl-brass .wp-block-button__link { flex-direction: column; align-items: flex-start; gap: 0.15rem; padding: 0.75rem 2rem 0.8rem 1.4rem; box-shadow: 0 0 0 1px var(--mgl-brass), 0 0 0 5px var(--mgl-night), 0 0 0 6px var(--mgl-brass-deep); }
.mgl-go-word { font: 800 1.55rem/1.1 var(--mgl-serif); }
.mgl-go-sub { font-size: 0.85rem; font-weight: 600; }
.mgl-adult { font-size: 0.93rem; color: var(--mgl-mist); }
.mgl-adult b { padding: 0.05rem 0.35rem; color: var(--mgl-night); background: var(--mgl-rose); border-radius: 3px; }
.has-small-font-size { font-size: 0.88rem; color: var(--mgl-mist); }
.wp-block-image { margin: 1.4rem 0 1.6rem; }
.wp-block-image svg { display: block; width: 100%; height: auto; }
.wp-element-caption { margin-top: 0.35rem; font-size: 0.82rem; text-align: center; color: var(--mgl-mist); }
.mgl-part { margin-top: 2.2rem; }
.mgl-kicker { margin: 0 0 0.2rem; font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mgl-brass); }
.entry-content h2 { font-size: clamp(1.35rem, 3.8vw, 1.85rem); }
.entry-content h3 { font-size: 1.1rem; }
.wp-block-columns { display: grid; gap: 1rem; margin: 1.2rem 0; }
@media (min-width: 40rem) { .wp-block-columns { grid-template-columns: 1fr 1fr; } }
.wp-block-column { padding: 0.9rem 1rem 0.2rem; background: var(--mgl-card); border-top: 3px solid var(--mgl-brass); }
.wp-block-column.mgl-not { border-top-color: var(--mgl-rose); }
.wp-block-list { margin: 0 0 1rem; padding-left: 1.2rem; }
.wp-block-list li { margin-bottom: 0.45rem; }
.wp-block-list li::marker { color: var(--mgl-brass); }
.mgl-numbered li { margin-bottom: 0.8rem; }
.mgl-numbered strong { font-family: var(--mgl-serif); color: var(--mgl-brass-light); }
.wp-block-quote { margin: 1.2rem 0; padding: 0.4rem 0 0.4rem 1rem; font-style: italic; border-left: 3px solid var(--mgl-rose); }
.wp-block-details { margin-bottom: 0.5rem; padding: 0 1rem; background: var(--mgl-card); border: 1px solid var(--mgl-line); }
.wp-block-details summary { cursor: pointer; padding: 0.75rem 0; font-weight: 700; }
.wp-block-details[open] { border-color: var(--mgl-brass-deep); }
.wp-block-details p { color: var(--mgl-mist); }
.mgl-outro { margin-top: 1.8rem; padding-top: 1rem; font-family: var(--mgl-serif); font-size: 1.1rem; border-top: 1px solid var(--mgl-line); }

/* Widgets */
.widget-area .widget { margin-bottom: 1.5rem; padding: 0.9rem 1rem; background: var(--mgl-stage); border: 1px solid var(--mgl-line); }
.widget-title { margin: 0 0 0.6rem; font-size: 1.05rem; color: var(--mgl-brass-light); }
.widget ul { margin: 0; padding: 0; list-style: none; }
.widget li { padding: 0.35rem 0; font-size: 0.93rem; line-height: 1.4; border-bottom: 1px solid var(--mgl-line); }
.widget li:last-child { border-bottom: 0; }
.widget li a { color: var(--mgl-ivory); text-decoration: none; }
.widget li a:hover { color: var(--mgl-brass-light); }
.mgl-widget-start .wp-element-button { width: 100%; }
.mgl-widget-start p { margin: 0.5rem 0 0; font-size: 0.85rem; color: var(--mgl-mist); }
.tagcloud { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.tag-cloud-link { padding: 0.2rem 0.55rem; font-size: 0.85rem; color: var(--mgl-ivory); text-decoration: none; background: var(--mgl-card); border: 1px solid var(--mgl-line); border-radius: 3px; }
.tag-cloud-link:hover { color: var(--mgl-night); background: var(--mgl-brass); }

/* Footer in flow + floating strip */
.site-footer { margin-top: 2rem; padding-block: 1.6rem 1rem; font-size: 0.9rem; color: var(--mgl-mist); background: var(--mgl-stage); border-top: 1px solid var(--mgl-line); }
.footer-navigation ul { display: flex; flex-wrap: wrap; gap: 0.2rem 1.2rem; margin: 0.4rem 0 0.9rem; padding: 0; list-style: none; }
.footer-navigation a { display: inline-block; padding: 0.2rem 0; color: var(--mgl-ivory); }
.site-info { margin: 0; font-size: 0.82rem; }
.mgl-floatfoot { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: rgba(25, 11, 13, 0.96); border-top: 1px solid var(--mgl-brass-deep); }
.mgl-floatfoot-row { display: flex; align-items: center; gap: 0.8rem; min-height: 3.2rem; }
.mgl-floatfoot-18 { padding: 0.1rem 0.4rem; font-size: 0.8rem; font-weight: 800; color: var(--mgl-night); background: var(--mgl-rose); border-radius: 3px; }
.mgl-floatfoot-name { flex: 1; font-family: var(--mgl-serif); color: var(--mgl-mist); }
.mgl-floatfoot-go { padding: 0.35rem 0.8rem; font-weight: 700; font-size: 0.9rem; color: var(--mgl-night); text-decoration: none; background: var(--mgl-brass); border-radius: 3px; }
.mgl-floatfoot-go:hover { color: var(--mgl-night); background: var(--mgl-brass-light); }

/* Legal pages and form */
.mgl-legal h2 { font-size: clamp(1.15rem, 3vw, 1.45rem); margin-top: 1.8rem; }
.mgl-legal li { margin-bottom: 0.4rem; }
.mgl-textlink { display: inline-block; margin: 0.5rem 0 0 1rem; }
.mgl-form { display: grid; gap: 0.4rem; margin-top: 1rem; }
.mgl-form label { margin-top: 0.6rem; font-weight: 700; }
.mgl-form select, .mgl-form input, .mgl-form textarea { width: 100%; padding: 0.6rem 0.7rem; font: 1rem/1.4 var(--mgl-sans); color: var(--mgl-ivory); background: var(--mgl-card); border: 1px solid var(--mgl-line); border-radius: 3px; }
.mgl-form textarea { min-height: 9rem; resize: vertical; }
.mgl-form-note { font-size: 0.88rem; color: var(--mgl-mist); }
.mgl-form .wp-element-button { justify-self: start; margin-top: 0.4rem; }