/* Palette taken from the old simon.wenner.ch, contrast adjusted. */
:root {
    --orange: #ff8d33;
    --orange-dark: #ff7000;
    --dark: #33383d;
    --header: #33363b;
    --grey: #8a9096;
    --grey-light: #c0c0c0;
    --page: #ffffff;
    --width: 900px;
}

* { box-sizing: border-box; }

body {
    font: 18px/24px Helvetica, Arial, sans-serif;
    background: var(--page);
    color: var(--dark);
    margin: 0;
    padding: 0;
}

a { color: var(--orange); text-decoration: none; }
a:hover { color: var(--orange-dark); text-decoration: underline; }

/* No width is set: a picture in a text is shown at the size it was made,
   the way the old site did it. max-width is only there so an oversized one
   cannot push the page sideways.
   No frame either: a picture in a text is part of the text, and a logo or a
   screenshot with its own white ground gains nothing from being boxed in.
   The frame belongs to the gallery, where it separates one thumbnail from the
   next — see .imageFrame. */
img { max-width: 100%; height: auto; }

.floatRight { float: right; margin: 4px 0 4px 20px; }
.floatLeft { float: left; margin: 4px 20px 4px 0; }

p, h1, h2, h3 { margin: 0 0 20px 0; }
h1 { font-size: 64px; line-height: 72px; color: var(--dark); }
h2, h3 { clear: both; }
h2 { color: var(--grey-light); border-bottom: 1px dashed var(--grey-light); padding-bottom: 4px; }
/* Not the old sheet's light grey: an h3 is a project title, the thing a reader
   scans the page for, and at 18px that grey is too faint to carry it. An h2 is
   a group label above a dashed rule, which the rule already announces. */
h3 { margin-bottom: 8px; color: var(--dark); }

/* The archive shows one list, and everything in it is past by definition, so
   a Current/Past heading would only repeat what the page already says. The
   headings stay in the document — it is the same rendered list as the projects
   page — and the archive alone suppresses them, keyed on data-page. */
body[data-page="archive"] .group h2 {
    display: none;
}

/* header and navigation */

#header-background {
    background: var(--header);
    border-bottom: 3px solid var(--orange);
}

/* The bar takes its height from the title and the nav alone, as the old one
   did: 10px above and below the title, 4px around the links, and nothing
   else. Vertical padding here would push the orange rule away from the nav. */
header {
    margin: 0 auto;
    padding: 0 16px;
    max-width: var(--width);
    /* Contains the title's margins instead of letting them collapse out of
       the bar, which is what would make it 10px shorter than the old one. */
    overflow: hidden;
}

header h1 { font-size: 32px; line-height: 32px; margin: 10px 0; letter-spacing: -1px; }
header h1 a, header h1 a:hover { color: #fff; text-decoration: none; }

nav ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 14px; }
nav a { display: inline-block; margin: 4px 0; color: var(--grey-light); }
nav a:hover { color: #fff; text-decoration: none; }

/* content */

#main {
    max-width: var(--width);
    margin: 0 auto;
    padding: 24px 16px 40px 16px;
}

.with-sidebar { display: flex; flex-wrap: wrap; gap: 32px; align-items: flex-start; }
.with-sidebar .lead { flex: 1 1 380px; font-size: 20px; }
/* The cloud takes half the column on Home just as it does on the list pages;
   the intro runs beside it. */
.sidebar { flex: 0 1 50%; order: 2; }

/* site.js filters by toggling `hidden`, so it must beat any display rule. */
[hidden] { display: none !important; }

.entry { margin-bottom: 36px; }

.post_footer { font-size: 12px; color: var(--grey); padding-top: 4px; }
.filter, .sorting, .more, .empty { font-size: 14px; color: var(--grey); }
.more { margin-top: 32px; }

/* Tags are words wherever they appear, framed nowhere — see the cloud below. */
a.tag { margin-right: 0.6em; color: var(--orange); }
a.tag:hover { color: var(--orange-dark); }

/* The cloud is words, as on the old site — no frames, because a frame is a
   fixed shape drawn around every tag and it is exactly what made the cloud
   read as a grid of buttons.
   The shape comes from three things: the words are centred, so both edges of
   the block are ragged instead of just the right one; they hang from a shared
   middle line rather than a baseline, so a big tag pushes its neighbours out
   of line; and the block is kept narrower than the column, so it wraps often
   enough to be a shape at all. */
.tagcloud {
    list-style: none;
    margin: 0 0 20px 0;
    padding: 0;
    max-width: 32em;
    text-align: center;
    line-height: 1.1;
}
.tagcloud li { display: inline; }
.tagcloud a {
    display: inline-block;
    margin: 0.12em 0.3em;
    vertical-align: middle;
    color: var(--orange);
}
.tagcloud a:hover { color: var(--orange-dark); }
.tagcloud a.selected, a.tag.selected { color: var(--dark); text-decoration: underline; }

/* On a list page the cloud floats in the corner and the title runs alongside
   it, as on the old main page. Everything below the title clears it, so the
   float reaches the heading and the intro and nothing else.
   A cloud takes half the column: a narrower one is a squashed grid of buttons,
   which is not the shape a cloud should have. */
.tagcloud.floated {
    float: right;
    width: 50%;
    margin: 0 0 16px 24px;
}
.filter, .empty, .sorting, .gallery { clear: both; }

.sorting a.selected {
    border-color: var(--orange);
    background: var(--orange);
    color: #fff;
}
.sorting a { padding: 1px 6px; border-radius: 10px; }

/* Featured projects on Home: three boxes side by side, one link each. The
   thumbnail takes the gallery's frame — it is a gallery thumbnail, only
   wider — and the teaser is set like the meta lines, small and quiet, so
   the title stays the thing the eye lands on. */
.featured {
    list-style: none;
    margin: 0 0 20px 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.featured img { width: 100%; height: 150px; object-fit: cover; }
.featured h3 { margin-bottom: 4px; }
.featured p { margin: 0; font-size: 14px; line-height: 20px; color: var(--grey); }
.featured a { display: block; color: var(--dark); }
.featured a:hover { color: var(--dark); text-decoration: none; }
.featured a:hover h3 { text-decoration: underline; }
.featured a:hover .imageFrame { border-color: var(--orange); }

/* gallery */

.gallery { list-style: none; margin: 0 0 16px 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.gallery li { margin: 0; }
.gallery img {
    display: block;
    width: 160px;
    height: 120px;
    object-fit: cover;
}
/* The old site framed thumbnails as thinly as any other image; a thick frame
   eats into a 160px thumbnail and turns a wall of them into a wall of black. */
.imageFrame { border: 2px solid var(--dark); }
.gallery a:hover .imageFrame { border-color: var(--orange); }

.full { margin-bottom: 20px; }
.full img, .full video { max-width: 100%; height: auto; }

#prev_next { text-align: center; font-size: 14px; margin-top: 32px; }

/* overlay */

.overlay {
    position: fixed;
    inset: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px;
    background: rgba(20, 22, 24, 0.95);
    color: #fff;
}
body.overlay-open { overflow: hidden; }

.overlay-figure {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    min-width: 0;
    max-height: 100%;
    margin: 0;
}
.overlay-media { display: flex; min-height: 0; }
/* The picture takes the room the caption leaves, and never more than its own
   size — the same rule the body images follow. */
.overlay-media img, .overlay-media video {
    max-width: 100%;
    max-height: 70vh;
    width: auto;
    height: auto;
    border: 0;
}
.overlay figcaption { max-width: 640px; text-align: center; font-size: 15px; }
.overlay figcaption h2 {
    margin: 0 0 8px 0;
    font-size: 20px;
    color: #fff;
    border: 0;
}
.overlay figcaption p { margin: 0 0 8px 0; }
.overlay figcaption [data-note] { color: var(--grey-light); }
.overlay-meta { font-size: 13px; color: var(--grey); }

/* Big enough to be the obvious way onward, which the footer links never were. */
.overlay-step {
    flex: 0 0 auto;
    padding: 0 16px;
    border: 0;
    background: none;
    color: var(--grey-light);
    font-size: 40px;
    line-height: 1;
    cursor: pointer;
}
.overlay-step:hover { color: #fff; }
.overlay-close {
    position: absolute;
    top: 8px;
    right: 16px;
    border: 0;
    background: none;
    color: var(--grey-light);
    font-size: 32px;
    line-height: 1;
    cursor: pointer;
}
.overlay-close:hover { color: #fff; }

/* footer */

footer {
    max-width: var(--width);
    margin: 0 auto;
    padding: 12px 16px;
    font-size: 12px;
    text-align: center;
    color: var(--grey);
    border-top: 1px dashed var(--grey-light);
}
footer a { color: var(--grey); }

@media (max-width: 600px) {
    body { font: 16px/22px Helvetica, Arial, sans-serif; }
    h1 { font-size: 36px; line-height: 42px; }
    .gallery img { width: 120px; height: 90px; }
    /* Three boxes side by side would be three slivers down here. */
    .featured { grid-template-columns: 1fr; }
    /* Too narrow for text to wrap beside a picture; stack them instead. */
    .floatRight, .floatLeft { float: none; display: block; margin: 0 0 16px 0; }
    .tagcloud.floated { float: none; width: auto; margin: 0 0 16px 0; }
    /* Swiping is the way onward here, so the arrows shrink out of the way. */
    .overlay { padding: 8px; }
    .overlay-step { padding: 0 4px; font-size: 28px; }
    .overlay-media img, .overlay-media video { max-height: 60vh; }
}