of
sibling posts). Eris draws it as a white card with a hard black rule
(line 5450); #f1ecee is this layer's tinted-panel tone, already carrying
blocks, and the hairline matches the rest of the boxed components. */
body .jp-relatedposts .series_overview {
background: #f1ecee;
border: 1px solid var(--sm-rule);
padding: var(--sm-space-4);
}
/* Hover overlay: Eris' offset white ::before is invisible on paper. Replace it
with a full-cover ink wash and a centred arrow that fade in on hover. The
.hentry scope outweighs Eris' .format-standard .featured-image a:after glyph. */
body .hentry .featured-image a::before {
content: "";
position: absolute;
inset: 0;
transform: none;
background: rgba(16, 20, 27, 0.45);
opacity: 0;
transition: opacity .35s ease;
z-index: 1;
}
body .hentry .featured-image a::after {
content: "↗";
font-family: var(--sm-font-display);
font-size: 40px;
font-weight: 500;
line-height: 1;
color: var(--sm-paper);
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity .35s ease;
z-index: 2;
}
body .hentry .featured-image a:hover::before,
body .hentry .featured-image a:hover::after {
opacity: 1;
}
/* Radius is 0 across the board — undo Eris/Jetpack rounding. */
body input,
body textarea,
body select,
body button,
body .featured-image img,
body .featured-image a {
border-radius: 0;
}
/*--------------------------------------------------------------
# Shared devices
--------------------------------------------------------------*/
.sm-mono {
font-family: var(--sm-font-mono);
font-size: 11.5px;
line-height: 1.5;
letter-spacing: 0.04em;
color: var(--sm-muted);
}
/*--------------------------------------------------------------
# Header / nav
--------------------------------------------------------------*/
.site-header {
background: var(--sm-bg);
border-bottom: 1px solid var(--sm-ink);
/* Eris draws a 28px white border-top and 1em padding on the masthead — the
white strip above the header. Drop both; spacing lives on .container. */
border-top: 0;
padding: 0;
}
/* Eris lays the header out with display:table. Flex it. */
body .site-header .container,
body .site-header .container.container-big {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sm-space-3);
max-width: 1180px;
margin: 0 auto;
padding: 24px var(--sm-gutter);
}
body .site-branding {
max-width: none;
display: flex;
align-items: center;
gap: 14px;
flex: 0 0 auto;
}
.sm-monogram-link {
display: block;
line-height: 0;
flex: 0 0 auto;
}
.sm-monogram {
display: block;
width: 40px;
height: 40px;
flex: 0 0 auto;
}
body .site-branding .site-title,
body .site-branding p.site-title,
body .site-branding h1.site-title {
font-family: var(--sm-font-display);
font-size: 19px;
font-weight: 600;
letter-spacing: -0.01em;
line-height: 1;
margin: 0;
padding: 0;
}
body .site-branding .site-title a,
body .site-branding p.site-title a,
body .site-branding h1.site-title a {
color: var(--sm-text-strong);
font-size: 19px;
padding: 0;
}
body .site-branding .site-title a:hover {
color: var(--sm-blue);
}
/* The full stop is the wordmark's only accent. Generated rather than marked up:
the site name comes from bloginfo('name'), which also feeds and feeds. */
body .site-branding .site-title a:after {
content: ".";
color: var(--sm-blue);
}
body .site-branding .site-description {
display: none;
}
body nav#site-navigation {
background-color: transparent;
flex: 0 1 auto;
}
body .site-header nav,
body .main-navigation a {
font-family: var(--sm-font-mono);
font-size: 12px;
font-weight: 400;
letter-spacing: 0.06em;
text-transform: uppercase;
}
body .site-header .nav-menu {
display: flex;
align-items: center;
gap: 34px;
margin: 0;
padding-left: 0;
}
body .nav-menu > li {
margin: 0;
padding: 0;
}
body .main-navigation a {
color: var(--sm-muted);
}
body .main-navigation a:hover,
body .main-navigation .current-menu-item > a,
body .main-navigation .current_page_item > a {
color: var(--sm-blue);
}
/* Submenus: sharp, hairline, paper. */
body .main-navigation ul ul {
background: var(--sm-bg);
border: 1px solid var(--sm-rule);
border-radius: 0;
padding: var(--sm-space-1) 0;
}
body .main-navigation ul ul li {
display: block;
}
body .main-navigation ul ul a {
display: block;
padding: 6px 16px;
}
/* Injected by common.js:51 — do not restructure, only tint. */
body .dropdown-toggle {
color: var(--sm-muted);
}
/* The toggle button carries two labels (<i>Menu</i> + "Primary Menu"); Eris
gives it an ink background. Strip it to a clean mono "Menu" on paper — it
only ever shows below 1200px (burger range). */
body .menu-toggle {
background: transparent;
border: 0;
padding: 0;
color: var(--sm-ink);
font-family: var(--sm-font-mono);
font-size: 0;
letter-spacing: 0.06em;
text-transform: uppercase;
cursor: pointer;
}
body .menu-toggle i {
font-size: 12px;
font-style: normal;
}
body #menuMarker {
background: var(--sm-blue);
}
body .sidebar-trigger,
body #big-search-trigger {
color: var(--sm-ink);
}
/* The aside trigger ships as an icomoon "…" glyph. Redraw it as a 3-bar
burger in CSS — the live icon font is a subset, so a glyph swap is unsafe.
The <i> is the middle bar; its ::before/::after are the top/bottom bars. */
body .sidebar-trigger i {
position: relative;
display: inline-block;
width: 22px;
height: 2px;
background: var(--sm-ink);
font-size: 0;
vertical-align: middle;
}
body .sidebar-trigger i:before,
body .sidebar-trigger i:after {
content: "";
position: absolute;
left: 0;
width: 22px;
height: 2px;
background: var(--sm-ink);
font-family: inherit;
}
body .sidebar-trigger i:before {
top: -7px;
}
body .sidebar-trigger i:after {
top: 7px;
}
/*--------------------------------------------------------------
# Aside (#secondary)
#
# Eris ships this as a black 770px off-canvas slab (line 4393) with
# centred 300px widgets. Below 1200px it is now the site's primary
# navigation surface, so it moves onto the 2026 tokens: it stays dark,
# but takes the footer's ink/on-dark palette and the site's typography,
# left-aligned instead of centred.
#
# Most base rules here are keyed on `.scroll-box x` (0,2,0), so the
# overrides need `body > .widget-area` in front to win.
--------------------------------------------------------------*/
body > .widget-area {
background: var(--sm-ink);
width: min(440px, 100%);
padding: var(--sm-space-6) 0;
}
/* The panel is fixed at left:100% and sits before #page in the DOM, so
without this it is the first tab stop on every page — ahead of the skip
link — while parked off-screen. The delayed visibility keeps the slide-out
animation intact instead of blinking the panel away. */
body:not(.sidebar-opened) > .widget-area {
visibility: hidden;
transition: transform .5s cubic-bezier(0.28, 0.12, 0.22, 1) .1s, visibility 0s .5s;
}
/* Order, not DOM position: sidebar.php renders the primary menu last (after
the widgets and the Impressum nav) but it belongs directly under the search
field. `order` also lets the placement be breakpoint-conditional, which a
PHP-side injection could not be. */
body > .widget-area .scroll-box {
display: flex;
flex-direction: column;
gap: var(--sm-space-5);
text-align: left;
padding: 0 var(--sm-gutter);
}
/* The initial `order` is 0, which sorts *before* 1 — every child needs an
explicit value or a new widget would jump to the top of the panel. */
body > .widget-area .scroll-box > * {
order: 3;
}
body > .widget-area .scroll-box > .widget_search {
order: 1;
}
body > .widget-area .scroll-box > .sm-aside-primary {
order: 2;
}
/* `gap` replaces Eris' sibling margin (line 3219), which walks DOM order and
so would land in the wrong gaps once `order` reshuffles the panel. */
body > .widget-area .scroll-box .widget + .widget {
margin-top: 0;
}
body > .widget-area .widget {
max-width: none;
margin-left: 0;
margin-right: 0;
text-align: left;
}
/* Eris' own dark-panel colours (lines 997 and 1073) are plain white and
white-at-80%; swap in the footer's on-dark palette. */
body > .widget-area .scroll-box .widget,
body > .widget-area .scroll-box .widget p,
body > .widget-area .scroll-box .widget a,
body > .widget-area .scroll-box .tagcloud a,
body > .widget-area .scroll-box .widget h1,
body > .widget-area .scroll-box .widget h2,
body > .widget-area .scroll-box .widget h3,
body > .widget-area .scroll-box .widget h4,
body > .widget-area .scroll-box .widget h5,
body > .widget-area .scroll-box .widget h6 {
font-family: var(--sm-font-display);
color: var(--sm-on-dark-muted);
letter-spacing: 0;
}
body > .widget-area .scroll-box .widget a:hover,
body > .widget-area .scroll-box .tagcloud a:hover {
color: var(--sm-blue-link-on-dark);
}
/* Scoped through `.widget` so it outweighs the `.widget h1…h6` rule above —
the widget title is an <h2>, and that selector carries one more type. */
body > .widget-area .scroll-box .widget .widget-title {
font-family: var(--sm-font-mono);
font-size: 11.5px;
font-weight: 400;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--sm-blue-on-dark);
margin-bottom: var(--sm-space-2);
}
body > .widget-area .scroll-box .widget input[type="search"],
body > .widget-area .scroll-box .widget input[type="text"],
body > .widget-area .scroll-box .widget select,
body > .widget-area .scroll-box .widget textarea {
width: 100%;
background: transparent;
border: 1px solid rgba(233, 235, 238, 0.28);
color: var(--sm-on-dark);
}
body > .widget-area .scroll-box .widget input::placeholder {
color: var(--sm-on-dark-muted);
}
/* Eris parks the submit button inside the field's right edge; keep the typed
query clear of it. */
body > .widget-area .scroll-box .widget .search-form input[type="search"] {
padding-left: var(--sm-space-3);
padding-right: 56px;
}
body > .widget-area .scroll-box .widget input[type="search"]:focus,
body > .widget-area .scroll-box .widget input[type="text"]:focus,
body > .widget-area .scroll-box .widget textarea:focus {
border-color: var(--sm-blue-on-dark);
}
/* Core's search widget submits with <input type="submit" value="Suchen">, which
can carry no ::before — so the label is zeroed out and a magnifier is masked
over the element itself, tinted with background-color. The `value` survives
for screen readers. */
body > .widget-area .scroll-box .widget .search-form input[type="submit"] {
width: 46px;
font-size: 0;
color: transparent;
background-color: var(--sm-on-dark-muted);
-webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M16.5 16.5 21 21'/%3E%3C/svg%3E") no-repeat center / 18px 18px;
mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M16.5 16.5 21 21'/%3E%3C/svg%3E") no-repeat center / 18px 18px;
}
body > .widget-area .scroll-box .widget .search-form input[type="submit"]:hover,
body > .widget-area .scroll-box .widget .search-form input[type="submit"]:focus {
background-color: var(--sm-blue-link-on-dark);
}
/* Menus in the panel: the primary menu leads, the Impressum stays a footnote. */
body > .widget-area .scroll-box .widget_nav_menu .menu {
list-style: none;
margin: 0;
padding-left: 0;
}
body > .widget-area .scroll-box .sm-aside-primary .menu > li + li {
margin-top: var(--sm-space-2);
}
body > .widget-area .scroll-box .sm-aside-primary a {
font-size: 26px;
line-height: 1.2;
color: var(--sm-on-dark);
}
body > .widget-area .scroll-box .sm-aside-primary a:hover {
color: var(--sm-blue-link-on-dark);
}
/* Sub-menus are flat here — no hover affordance in an off-canvas panel. */
body > .widget-area .scroll-box .sm-aside-primary .sub-menu {
list-style: none;
margin: var(--sm-space-1) 0 0;
padding-left: var(--sm-space-2);
}
body > .widget-area .scroll-box .sm-aside-primary .sub-menu a {
font-size: 17px;
}
body > .widget-area .scroll-box .sm-aside-impressum a {
font-family: var(--sm-font-mono);
font-size: 11.5px;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--sm-on-dark-muted);
}
/* `body button` (line 8540) fills the close button with ink, which on the ink
panel hides the X in a black-on-black square. */
body > .widget-area .close-sidebar {
top: var(--sm-space-3);
right: var(--sm-space-3);
background: transparent;
}
body > .widget-area .close-sidebar:before,
body > .widget-area .close-sidebar:after {
background-color: var(--sm-on-dark);
}
body > .widget-area .close-sidebar:hover:before,
body > .widget-area .close-sidebar:hover:after {
background-color: var(--sm-blue-link-on-dark);
}
/*--------------------------------------------------------------
# Map templates (/travel-map/ and the full-page map)
#
# Eris clears its old masthead with 205/185/155px of .site-content
# padding (lines 5778, 6712, 6775). The 2026 header is ~89px, so on the
# map pages that left ~116px of dead space above a map that the template
# JS shortened by the same stale number. Clear exactly the header
# instead: content-worldmap.php publishes --sm-header-h from the live
# element on ready and resize, and the fallback keeps the first paint
# stable before that runs.
#
# The .sticky-header half of the selector list is not decoration: Eris'
# offsets are keyed on `.sticky-header.page .site-content` (0,3,0), so a
# plain `body.page-template-… .site-content` (0,2,1) loses to them.
--------------------------------------------------------------*/
body.sticky-header.page-template-page_worldmap .site-content,
body.sticky-header.page-template-page_worldmap-php .site-content,
body.sticky-header.page-template-page_full_map .site-content,
body.sticky-header.page-template-page_full_map-php .site-content,
body.page-template-page_worldmap .site-content,
body.page-template-page_worldmap-php .site-content,
body.page-template-page_full_map .site-content,
body.page-template-page_full_map-php .site-content {
padding-top: var(--sm-header-h, 89px);
padding-bottom: 0;
min-height: 0;
}
/* The map runs edge to edge, so the two rotated rails would sit on top of it
rather than beside it. common.js fades the stats rail with jQuery, which
writes an inline display — hence !important, as in the <1200px rule. */
body.page-template-page_worldmap .menu-social-container,
body.page-template-page_worldmap .stats-menu-container,
body.page-template-page_worldmap-php .menu-social-container,
body.page-template-page_worldmap-php .stats-menu-container,
body.page-template-page_full_map .menu-social-container,
body.page-template-page_full_map .stats-menu-container,
body.page-template-page_full_map-php .menu-social-container,
body.page-template-page_full_map-php .stats-menu-container {
display: none !important;
}
/*--------------------------------------------------------------
# Hero band (index.php, archive.php)
--------------------------------------------------------------*/
.sm-hero {
padding: var(--sm-space-6) var(--sm-gutter) 76px;
max-width: 1180px;
margin: 0 auto;
opacity: 0;
}
/* common.js:870 puts .show on body once the page is ready — Eris fades
.content-area in the same way. Match it so the hero doesn't flash. */
.show .sm-hero {
opacity: 1;
transition: opacity .5s cubic-bezier(0.28, 0.12, 0.22, 1) .5s;
}
body .sm-hero__title {
font-size: clamp(40px, 8vw, 68px);
font-weight: 600;
line-height: 0.98;
letter-spacing: -0.03em;
max-width: 16ch;
text-wrap: balance;
margin: 0 0 30px;
color: var(--sm-text-strong);
}
.sm-hero__sub {
font-size: 19px;
line-height: 1.55;
color: var(--sm-text);
max-width: 38em;
margin: 0;
}
/* Section header above the post list — the mockup's "(01) …" row. */
.sm-section-head {
max-width: 1180px;
margin: 0 auto;
padding: 40px var(--sm-gutter) var(--sm-space-4);
border-top: 1px solid var(--sm-ink);
}
body .sm-section-head__title {
font-family: var(--sm-font-mono);
font-size: 14px;
font-weight: 400;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--sm-blue);
margin: 0;
padding: 0;
background: none;
}
/*--------------------------------------------------------------
# Post list
#
# Preserves the JS contract: #post-load, .hentry, .grid-sizer,
# .infinite-loader, .masonry, and the JS-set opacity on .masonry.
--------------------------------------------------------------*/
/* Eris insets this container by 180px, which would break the 52px gutter the
header, hero and footer share. One column edge for the whole page. */
body .container.container-medium {
max-width: 1180px;
padding-left: var(--sm-gutter);
padding-right: var(--sm-gutter);
}
body .listing .hentry {
border-bottom: 1px solid var(--sm-rule);
padding-bottom: var(--sm-space-5);
}
body .listing .featured-image a,
body .listing .featured-image img {
border-radius: 0;
}
body .listing .entry-title {
font-size: 22px;
font-weight: 600;
line-height: 1.15;
letter-spacing: -0.01em;
margin-top: 0;
margin-bottom: var(--sm-space-1);
}
body .listing .entry-header .entry-title a {
color: var(--sm-text-strong);
}
body .listing .entry-header .entry-title a:hover {
color: var(--sm-blue);
}
body .category-list,
body .post-date,
body .post-comment,
body .post-article,
body .comment-metadata,
body .search-post-type,
body .listing .entry-header .entry-meta {
font-family: var(--sm-font-mono);
font-size: 11.5px;
letter-spacing: 0.04em;
color: var(--sm-muted);
}
body .listing .entry-content p,
body .listing .entry-content {
font-size: 15px;
line-height: 1.6;
color: var(--sm-text);
}
/* Search results now carry a thumbnail (content-search.php), which Eris only
ever rendered for the portfolio type — so it stacked above the title inside
the 130px indent. Lay the result out as a row instead. The indent itself
stays: it is the rail holding the absolutely-positioned .search-post-type
label (Eris base line 4170), and abspos children ignore the flex context. */
body.search .search-container .hentry {
display: flex;
align-items: flex-start;
gap: var(--sm-space-4);
}
body.search .search-container .featured-image {
flex: 0 0 160px;
margin: 0;
}
/* Portrait and landscape thumbnails otherwise range from 107px to 240px tall
and leave the rows ragged. */
body.search .search-container .featured-image img {
display: block;
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
}
body.search .search-container .entry-header {
flex: 1 1 auto;
min-width: 0;
}
/* Tags: mono, blue, no pill. */
body .entry-footer,
body .entry-footer a {
font-family: var(--sm-font-mono);
font-size: 10.5px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--sm-blue);
background: none;
border: none;
}
body .entry-footer a:hover {
color: var(--sm-blue-hover);
}
body .read-more-link,
body .entry-content .read-more-link {
font-family: var(--sm-font-mono);
font-size: 11.5px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--sm-blue);
text-decoration: none;
border-radius: 0;
opacity: 1;
}
body .read-more-link::after {
content: "\e908"; /* icomoon icon-right */
font-family: "icomoon";
font-size: 0.85em;
margin-left: 0.5em;
vertical-align: middle;
display: inline-block;
transition: transform 0.15s ease;
}
body .read-more-link:hover,
body .entry-content .read-more-link:hover {
color: var(--sm-blue);
text-decoration: underline;
opacity: 1;
}
body .read-more-link:hover::after {
transform: translateX(3px);
}
/* Sticky-post marker was a white asterisk on the old black heading. */
body .listing .sticky .entry-header .entry-meta:before {
color: var(--sm-blue);
}
/*--------------------------------------------------------------
# Single / page
--------------------------------------------------------------*/
/* Eris centres the reading column inside the page. The Swiss grid hangs
everything off one left edge instead — the measure cap stays, the
centring goes, so title and body line up with the header and footer. */
body .container.container-small {
max-width: 1180px;
padding-left: var(--sm-gutter);
padding-right: var(--sm-gutter);
}
/* single.php and content-single.php each open a .container-small, so the
inner one would indent the body copy by a second gutter. */
body .container-small .container.container-small {
max-width: none;
padding-left: 0;
padding-right: 0;
}
body.single .hero .entry-header,
body.single .entry-content,
body.page .entry-content,
body.single .container-small > article,
body.page .container-small > article {
max-width: 760px;
margin-left: 0;
margin-right: 0;
}
body.single .entry-title,
body.single .hero .entry-title,
body.page .entry-title {
font-size: clamp(34px, 5.5vw, 56px);
font-weight: 600;
line-height: 1.02;
letter-spacing: -0.03em;
text-wrap: balance;
color: var(--sm-text-strong);
background: none;
padding: 0;
}
body.single .entry-header .entry-meta {
font-family: var(--sm-font-mono);
font-size: 11.5px;
letter-spacing: 0.04em;
color: var(--sm-muted);
}
/* Portrait title image: flush-left instead of centred (see single.php
hero--portrait). The featured figure is an inline-block, so left-aligning
the hero is what moves it to the left edge. */
body.single .hero--portrait {
text-align: left;
}
/* Narrow the headline so it sits beside the portrait figure, not under it.
Only wide enough viewports have room for the side-by-side layout; below
1440px the headline keeps the default single-post width. */
@media only screen and (min-width: 1680px) {
body.single .hero--portrait .entry-header {
max-width: 420px;
}
}
body.single .entry-content,
body.page .entry-content,
body.single .entry-content p,
body.page .entry-content p,
body .entry-content li {
font-size: 18px;
line-height: 1.6;
color: var(--sm-text-strong);
}
body.single .entry-content a,
body.page .entry-content a {
color: var(--sm-blue);
/* Eris underlines these at line 2816 too, which stacks a second line under
the rule-coloured border below. The border is the designed one. */
text-decoration: none;
border-bottom: 1px solid var(--sm-rule);
}
body.single .entry-content a:hover,
body.page .entry-content a:hover {
color: var(--sm-blue-hover);
border-bottom-color: var(--sm-blue-hover);
}
body blockquote,
body blockquote p,
body q {
font-family: var(--sm-font-display);
font-weight: 500;
color: var(--sm-text-strong);
border-left: 1px solid var(--sm-ink);
padding-left: var(--sm-space-3);
font-style: normal;
}
body blockquote cite,
body blockquote + cite,
body q cite {
font-family: var(--sm-font-mono);
font-size: 11.5px;
letter-spacing: 0.04em;
color: var(--sm-muted);
font-style: normal;
}
body code,
body kbd,
body tt,
body var,
body pre {
font-family: var(--sm-font-mono);
background: #f1ecee;
border-radius: 0;
}
body pre {
border: 1px solid var(--sm-rule);
padding: var(--sm-space-3);
font-size: 13px;
line-height: 1.6;
}
body .sub-article h3 {
font-size: 22px;
letter-spacing: -0.01em;
}
body .sub-article .date {
font-family: var(--sm-font-mono);
font-size: 11.5px;
letter-spacing: 0.04em;
color: var(--sm-muted);
}
/*--------------------------------------------------------------
# Forms, buttons, pagination
--------------------------------------------------------------*/
body input[type="text"],
body input[type="email"],
body input[type="tel"],
body input[type="password"],
body input[type="url"],
body input[type="search"],
body textarea,
body select {
background: transparent;
border: 1px solid var(--sm-rule);
border-radius: 0;
padding: 15px 16px;
font-size: 15px;
color: var(--sm-text-strong);
}
body input[type="text"]:focus,
body input[type="email"]:focus,
body input[type="search"]:focus,
body textarea:focus {
border-color: var(--sm-blue);
outline: none;
}
body button,
body input[type="button"],
body input[type="reset"],
body input[type="submit"] {
background: var(--sm-ink);
border: none;
border-radius: 0;
color: var(--sm-paper);
font-family: var(--sm-font-display);
font-size: 15.5px;
font-weight: 500;
padding: 16px 24px;
letter-spacing: 0;
text-transform: none;
}
body button:hover,
body input[type="submit"]:hover {
background: var(--sm-blue);
}
body .paging-navigation a,
body #infinite-handle span,
body .nav-links a {
font-family: var(--sm-font-mono);
font-size: 11.5px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--sm-blue);
border-radius: 0;
}
body #infinite-handle span {
background: transparent;
border: 1px solid var(--sm-ink);
color: var(--sm-ink);
padding: 14px 22px;
}
body #infinite-handle span:hover {
background: var(--sm-ink);
color: var(--sm-bg);
}
/*--------------------------------------------------------------
# Chrome: social menu, stats, scroll buttons, sidebar
--------------------------------------------------------------*/
body .menu-social-container,
body .menu-social-container ul,
body .menu-social-container .social-menu-trig,
body .stats-menu-container {
font-family: var(--sm-font-mono);
font-size: 12px;
letter-spacing: 0.04em;
color: var(--sm-muted);
}
body .menu-social-container .social-menu-trig,
body .stats-menu-container .stats_item {
text-transform: uppercase;
}
/* Eris paints the trigger #fff on #000 (see the >=1025px rule further up), but the
token rule above recolours the text to --sm-muted without touching the background,
which left grey on black at ~2.2:1. Invert it and outline instead. */
body .menu-social-container .social-menu-trig {
background-color: #fff;
color: #000;
border: 1px solid #000;
}
/* Eris parks the rotated stats rail with a 92px gap to the viewport edge;
push it toward the edge. More-negative `right` moves it further right (the
rail is rotated -90deg about transform-origin 0 0). Rails only show >=1200px
(see the burger switch below). */
@media only screen and (min-width: 1200px) {
body .stats-menu-container {
right: -350px;
}
}
body .menu-social-container p {
font-family: var(--sm-font-display);
font-size: 14px;
line-height: 1.6;
letter-spacing: 0;
text-transform: none;
color: var(--sm-text);
}
/* The article count is a link; keep its label in the rail colour instead of
the default link blue, so it matches the sibling stats items. */
body .stats-menu-container span.stats_item a {
color: inherit;
}
body .stats-menu-container span.stats_item span,
body .menu-social-container ul a:hover {
color: var(--sm-blue);
}
body .scroll-down,
body .scroll-up {
font-family: var(--sm-font-mono);
font-size: 11.5px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--sm-muted);
}
body .scroll-down:hover,
body .scroll-up:hover {
color: var(--sm-blue);
}
body .widget-title {
font-family: var(--sm-font-mono);
font-size: 11.5px;
font-weight: 400;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--sm-blue);
background: none;
padding: 0;
}
/*--------------------------------------------------------------
# Footer (dark)
--------------------------------------------------------------*/
body .site-footer {
background: var(--sm-ink);
color: var(--sm-on-dark-muted);
border-top: 1px solid var(--sm-ink);
padding-top: 0;
padding-bottom: 0;
/* the social/stats rails are position:fixed z-index:999; lift the footer
above them so it covers the rails when scrolled to the bottom instead of
the rail text floating over the dark footer */
position: relative;
z-index: 1000;
}
body .site-footer > .container,
body .site-footer .container {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sm-space-3);
flex-wrap: wrap;
max-width: 1180px;
margin: 0 auto;
padding: var(--sm-space-4) var(--sm-gutter);
overflow: visible;
}
body .site-footer,
body .site-footer .site-info,
body .site-footer .widget,
body .site-footer .sm-mono {
font-family: var(--sm-font-mono);
font-size: 11.5px;
line-height: 1.5;
letter-spacing: 0.04em;
color: var(--sm-on-dark-muted);
}
body .site-footer a {
color: var(--sm-on-dark-muted);
}
body .site-footer a:hover {
color: var(--sm-blue-link-on-dark);
}
body .site-footer h1,
body .site-footer h2,
body .site-footer h3,
body .site-footer h4,
body .site-footer h5,
body .site-footer h6,
body .site-footer .widget-title {
color: var(--sm-on-dark);
background: none;
padding: 0;
}
body .site-footer .widget-title {
color: var(--sm-blue-on-dark);
}
/* Eris footer widgets sit in the Bootstrap grid; let flex place them. */
body .site-footer .site-info,
body .site-footer .col-sm-5,
body .site-footer .col-sm-7 {
float: none;
width: auto;
padding: 0;
}
/* Bootstrap's negative row gutter would pull the footer text off the column edge. */
body .site-footer .row {
margin-left: 0;
margin-right: 0;
}
/*--------------------------------------------------------------
# Rail clearance
#
# The mockup is a plain 1180px card. This site isn't: Eris parks the
# rotated social bio and the stats counter in fixed rails down both
# edges, which Eris cleared with a 180px inset on .container-medium /
# .container-small alone — an inset the header, hero and footer never
# had, so nothing lined up. The gutter stays at the mockup's 52px and
# the column narrows instead, keeping one shared edge for every band.
#
# Eris only shows the rails above ~1200px; below that they are display:
# none and the column needs no clearance. --sm-rail-clear is the widest
# rail (left, 208px) plus breathing room.
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# Menu switch
#
# One breakpoint for the whole chrome: below 1200px the site is in burger
# mode and the two rotated rails (social bio, stats counter) are hidden;
# at/above 1200px the horizontal menu and both rails show. Eris' own
# standard-menu switch sits at 1025px, which left a 1025–1199 dead zone
# with the full menu but no rails — this collapses that zone.
--------------------------------------------------------------*/
@media only screen and (max-width: 1199px) {
/* The header carries no menu of its own down here: menu-1 is rendered into
the aside (sidebar.php) and reached through #sidebar-trigger, so there is
exactly one navigation control at these widths. Hiding the whole nav
retires Eris' burger, its full-screen black overlay
(.main-navigation > .menu, line 6974) and #menuMarker in one rule.
(1,0,1) beats .site-header nav{display:table-cell} at 5888, which sits in
a min-width:1025px block and so still applies across 1025–1199. */
body #site-navigation {
display: none;
}
/* Promote the aside trigger to an ordinary in-flow flex item so it sits on
the header's centre line next to the logo. Beats Eris'
.sidebar-trigger{display:none;position:absolute} at 6951 and 7430. */
body .site-header .sidebar-trigger {
display: block;
position: static;
top: auto;
right: auto;
width: 40px;
padding: 0;
flex: 0 0 auto;
}
/* No rails below 1200px. common.js sets an inline display on the stats
rail, so !important is required to override it. */
body .menu-social-container,
body .stats-menu-container {
display: none !important;
}
}
@media only screen and (min-width: 1200px) {
:root {
--sm-rail-clear: 260px;
}
body .site-header .container,
body .site-header .container.container-big,
body .container.container-medium,
body .container.container-small,
body .sm-hero,
body .sm-section-head,
body .site-footer > .container,
body .site-footer .container {
width: min(1180px, 100% - 2 * var(--sm-rail-clear));
}
/* The inner, padding-stripped container-small must not be re-narrowed. */
body .container-small .container.container-small {
width: auto;
}
/* The header nav carries menu-1 up here, so the aside copy stands down. */
body > .widget-area .scroll-box > .sm-aside-primary {
display: none;
}
}
/*--------------------------------------------------------------
# Wide-tablet / small-desktop band
#
# 1200–1439px is too narrow to pay for both rails: the symmetric rule
# above spends 520px on clearance and leaves ~780px of column at 1300px.
# Drop the stats rail here and give the column its 260px — the left
# clearance stays for the social rail, the right side runs flush to the
# viewport edge. At 1440px+ both rails return and the symmetric rule
# applies again.
#
# Same selectors and specificity as the block above, so this must stay
# after it — it wins on source order alone.
--------------------------------------------------------------*/
@media only screen and (min-width: 1200px) and (max-width: 1439px) {
/* common.js:464 fades the rail with jQuery, which writes an inline
`display` — hence !important, as in the <1200px rule. */
body .stats-menu-container {
display: none !important;
}
body .site-header .container,
body .site-header .container.container-big,
body .container.container-medium,
body .container.container-small,
body .sm-hero,
body .sm-section-head,
body .site-footer > .container,
body .site-footer .container {
width: auto;
margin-left: var(--sm-rail-clear);
margin-right: 0;
}
/* Nested containers already sit inside their parent's gutter; the rail
clearance must not be applied twice. Mirrors the width:auto reset in
the block above. */
body .container-small .container.container-small {
margin-left: 0;
margin-right: 0;
}
}
/*--------------------------------------------------------------
# Responsive
#
# common.js:43 hardcodes 767 for the sticky-header branch — the
# breakpoint below must stay in sync with it.
--------------------------------------------------------------*/
@media only screen and (max-width: 767px) {
:root {
--sm-gutter: 24px;
}
/* Logo + burger only down here — the row must never wrap the trigger onto a
second line, so a long site title truncates instead. */
body .site-header .container,
body .site-header .container.container-big {
flex-wrap: nowrap;
padding: 16px var(--sm-gutter);
}
body .site-branding {
min-width: 0;
}
body .site-title {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.sm-hero {
padding: var(--sm-space-5) var(--sm-gutter) var(--sm-space-4);
}
.sm-hero__sub {
font-size: 17px;
}
.sm-section-head {
padding: var(--sm-space-3) var(--sm-gutter) var(--sm-space-2);
}
body .site-footer > .container,
body .site-footer .container {
flex-direction: column;
align-items: flex-start;
gap: var(--sm-space-2);
padding: var(--sm-space-3) var(--sm-gutter);
}
body.single .entry-content,
body.page .entry-content,
body.single .entry-content p,
body.page .entry-content p {
font-size: 16px;
}
}
/*--------------------------------------------------------------
# Map loading state
#
# The route maps build their container first and only then fetch the
# track from location.nonstatics.com, so without this the user stares at
# an empty grey box. assets/js/route-map.js appends .sm-map-loading as a
# sibling of the map container inside .location-wrapper and toggles
# .is-active around every request.
#
# .is-quiet is the zoom-refetch variant: the map has already been drawn,
# so only the bar stays and the map underneath keeps working.
--------------------------------------------------------------*/
.location-wrapper {
position: relative;
}
.sm-map-loading {
display: none;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 3;
background-color: var(--sm-paper);
}
.sm-map-loading.is-active {
display: flex;
align-items: center;
justify-content: center;
}
.sm-map-loading.is-quiet {
background-color: transparent;
pointer-events: none;
}
.sm-map-loading__label {
font-family: var(--sm-font-mono);
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--sm-muted);
}
.sm-map-loading.is-quiet .sm-map-loading__label {
display: none;
}
.sm-map-loading__track {
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 4px;
overflow: hidden;
background-color: var(--sm-rule-faint);
}
.sm-map-loading.is-quiet .sm-map-loading__track {
background-color: transparent;
}
/* the stripe picks up the route palette so the wait reads as part of the map */
.sm-map-loading__bar {
display: block;
width: 40%;
height: 100%;
background-image: linear-gradient(
90deg,
var(--sm-blue) 0%,
#CD9E2D 25%,
#783487 50%,
#23A366 75%,
#B34249 100%
);
animation: sm-route-stripe 1.4s linear infinite;
}
@keyframes sm-route-stripe {
from { transform: translateX(-100%); }
to { transform: translateX(250%); }
}
@media (prefers-reduced-motion: reduce) {
.sm-map-loading__bar {
width: 100%;
animation: sm-route-stripe-pulse 2s ease-in-out infinite;
}
@keyframes sm-route-stripe-pulse {
0%, 100% { opacity: .35; }
50% { opacity: 1; }
}
}
/*--------------------------------------------------------------
# Map day hint
#
# Hovering a route segment lifts that day out and mutes the rest
# (assets/js/route-map.js, focusDay). This is the small label that
# names the hovered day; the JS positions it next to the cursor
# inside .location-wrapper and toggles .is-active.
--------------------------------------------------------------*/
.sm-map-daytip {
display: none;
position: absolute;
z-index: 4;
padding: 4px 8px;
border-radius: 3px;
background-color: var(--sm-ink);
color: var(--sm-on-dark);
font-family: var(--sm-font-mono);
font-size: 12px;
line-height: 1.3;
letter-spacing: 0.04em;
white-space: nowrap;
pointer-events: none;
box-shadow: 0 2px 6px rgba(16, 20, 27, 0.18);
}
.sm-map-daytip.is-active {
display: block;
}
/*--------------------------------------------------------------
# Related posts
#
# The related-posts block layout is still 2019-era Eris CSS: the
# container is flex + wrap + space-between and .jp-relatedposts-post
# carries no margin or padding at any breakpoint, so wrapped rows sit
# flush against each other and the block stops reading as a block.
# Same selector depth as the width rules it has to sit beside.
--------------------------------------------------------------*/
body #jp-relatedposts .jp-relatedposts-items-visual .jp-relatedposts-post {
margin-bottom: var(--sm-space-5);
}
/*--------------------------------------------------------------
# Map event tooltip
#
# The travel map (content-worldmap.php) shows a custom card instead
# of the default Google InfoWindow so the popup matches the site.
# The JS positions .sm-map-eventtip next to the cursor inside
# .location-wrapper: hover shows it transiently (pointer-events off),
# click pins it (.is-pinned re-enables clicks for the link + close).
--------------------------------------------------------------*/
.sm-map-eventtip {
display: none;
position: absolute;
z-index: 5;
max-width: 240px;
padding: 12px 14px;
background-color: var(--sm-paper);
border: 1px solid var(--sm-rule);
box-shadow: 0 2px 10px rgba(16, 20, 27, 0.14);
pointer-events: none;
}
.sm-map-eventtip.is-active {
display: block;
}
.sm-map-eventtip.is-pinned {
pointer-events: auto;
}
.sm-map-eventtip__title {
margin: 0 0 4px;
font-family: var(--sm-font-display);
font-size: 15px;
line-height: 1.3;
color: var(--sm-text-strong);
}
.sm-map-eventtip__date {
margin: 0;
font-family: var(--sm-font-mono);
font-size: 11px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--sm-muted);
}
.sm-map-eventtip__link {
display: inline-block;
margin-top: 8px;
font-size: 13px;
color: var(--sm-blue);
word-break: break-all;
}
.sm-map-eventtip__close {
position: absolute;
top: 4px;
right: 6px;
padding: 0 4px;
border: 0;
background: none;
font-family: var(--sm-font-mono);
font-size: 18px;
line-height: 1.2;
color: var(--sm-muted);
cursor: pointer;
}
.sm-map-eventtip__close:hover {
color: var(--sm-text-strong);
}