/* App additions on top of style.css (the 1:1 theme port).
   Most of this was inline <style> in the WordPress templates. No bold anywhere. */

/* ----- Footer (theme footer.php) ----- */
#footer { background: #f1f1f1; padding: 50px 0; margin-top: 75px; }
#footer li { list-style: none; }
#footer ul { padding: 0; margin: 0; }
#footer li a, #footer .link-button { color: #000000; }
#footer li a:hover, #footer .link-button:hover { color: #0000ff; }

.link-button { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }

/* ----- Code: blocks (resources/views/blocks/code.blade.php, highlighted server-side) and inline code ----- */
/* Light grey surface, no border, mono type; colours in the 128KB palette, never bold or italic. */
:root { --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; }
pre { position: relative; }
.code-block { margin: 0 0 1.5em; background: #f1f1f1; }
.code-block__head { display: flex; justify-content: space-between; align-items: center; min-height: 34px; padding: 6px 10px 0 16px; font-size: var(--fs-sm); color: #888888; }
.code-block pre, .content .code-block pre, .wiki-content .code-block pre, #content .code-block pre {
    margin: 0; padding: 8px 16px 16px; border: 0; border-radius: 0; background: transparent; overflow-x: auto;
}
.code-block code, .content .code-block pre code, .wiki-content .code-block pre code {
    display: block; padding: 0; border: 0; background: transparent; font-family: var(--mono); font-size: var(--fs-sm); line-height: 1.6; color: #000000; white-space: pre; tab-size: 4;
}
/* Copy: in the head row of code blocks; floating on other <pre>s (raw HTML). */
.code-copy-btn {
    position: absolute; top: 8px; right: 8px; padding: 2px 10px;
    font: inherit; font-size: var(--fs-sm); line-height: 1.4;
    color: #000000; background: #ffffff; border: 0; border-radius: 999px; cursor: pointer;
}
.code-block__head .code-copy-btn { position: static; }
.code-copy-btn:hover { background: #0000ff; color: #ffffff; }
/* Token colours (highlight.php emits highlight.js classes). */
.hljs-keyword, .hljs-built_in, .hljs-type, .hljs-literal, .hljs-selector-tag, .hljs-name, .hljs-attr, .hljs-title, .hljs-function .hljs-title, .hljs-section { color: #0000ff; }
.hljs-string, .hljs-number, .hljs-regexp, .hljs-symbol, .hljs-bullet, .hljs-template-variable, .hljs-variable { color: #000000; background: #dcf7dc; }
.hljs-comment, .hljs-quote, .hljs-meta, .hljs-doctag { color: #888888; }
.hljs, .hljs * { font-weight: normal !important; font-style: normal !important; }
/* Inline code in text, lists, tables */
:not(pre) > code, .content :not(pre) > code, .wiki-content :not(pre) > code, #content :not(pre) > code {
    font-family: var(--mono); font-size: .85em; padding: 2px 5px; background: #f1f1f1; border: 0; border-radius: 0; color: #000000; white-space: nowrap;
}

/* ----- Forms: login / join / password (label.field, label.check) — same look as the submit form (.submit-field):
   grey field, no border, blue border on focus, grey hints (unified 2026-11-03). ----- */
.field { display: block; margin-bottom: 28px; }
.field input:not([type=checkbox]):not([type=radio]):not([type=file]),
.field select,
.field textarea {
    display: block; width: 100%; margin-top: 6px;
    font-family: inherit; font-size: var(--fs-base); color: #000000; padding: 10px;
    border: 1px solid transparent; border-radius: 0; background: #f1f1f1; outline: none; box-shadow: none;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: #0000ff; }
.field textarea { resize: none; }
.field input[type=file] { display: block; margin-top: 6px; font-size: var(--fs-sm); }
.field-hint { display: block; margin-top: 6px; font-size: var(--fs-sm); color: #888888; }
.check { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 20px; font-size: var(--fs-sm); line-height: 1.4; cursor: pointer; }
.check input { width: auto; margin: 3px 0 0; flex-shrink: 0; accent-color: #0000ff; }

.notice { padding: 10px; background: #f1f1f1; color: #000000; margin-bottom: 24px; }
.notice-error { color: #ff0000; }
.notice ul { margin: 0; padding-left: 18px; }

/* ----- Big search field (theme archive-gifs.php .gifs-heading / page-authors.php .creators-heading) ----- */
.search-heading {
    display: block;
    width: calc(100% - 20px);
    margin: 25vh auto;
    max-width: 1600px;
    padding: 10px;
    background: #f1f1f1;
    color: #000000;
    font-family: "SuisseIntl", "Helvetica", Arial, sans-serif;
    font-size: calc(var(--fs-xl) * 1.1);
    font-weight: normal;
    letter-spacing: -0.02em;
    line-height: 95%;
    text-align: center;
    border: none;
    outline: none;
}
.search-heading::placeholder { color: #aaaaaa; }

/* ----- Creators (theme components/authors-featuring.php): every name at once, avatar left of it when there is one ----- */
.authors-featuring { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; padding: 0 15px; font-size: var(--fs-md); line-height: 1.25; }
.authors-featuring .creator-name { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.authors-featuring .creator-name[hidden] { display: none; }
.creator-name__avatar { width: 1em; height: 1em; border-radius: 50%; object-fit: cover; flex-shrink: 0; }

/* ----- Profile (theme author.php) ----- */
/* ----- Pills: framework tags on profiles, toggles in the submit form ----- */
.pill { display: inline-block; padding: 6px 14px; border: 1px solid #000000; border-radius: 999px; font-size: var(--fs-sm); line-height: 1.3; color: #000000; text-decoration: none; transition: background .1s, color .1s, border-color .1s; }
a.pill:hover { border-color: #0000ff; color: #0000ff; }

/* ----- Profile /@handle: header like an Instagram profile (round avatar, handle, numbers, bio); the normal GIF grid below ----- */
.profile { max-width: 935px; margin: 0 auto; padding: 140px 15px 60px; }
.profile-header { display: grid; grid-template-columns: 1fr 2fr; gap: 30px; align-items: center; }
.profile-avatar { justify-self: center; width: 150px; height: 150px; border-radius: 50%; overflow: hidden; background: #f1f1f1; display: flex; align-items: center; justify-content: center; }
.profile-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.profile-avatar img.pixelate { image-rendering: pixelated; }
.profile-avatar span { font-size: 64px; color: #0000ff; }
.profile-handle-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-bottom: 20px; }
#content h1.profile-handle { font-size: var(--fs-md); line-height: 1.2; margin: 0; padding: 0; text-align: left; }
.profile-edit { background: #f1f1f1; border-color: #f1f1f1; }
.profile-stats { display: flex; gap: 36px; list-style: none; margin: 0 0 20px; padding: 0; font-size: var(--fs-base); }
.profile-stats li { margin: 0; }
.profile-stats__n { color: #000000; }
.profile-stats li { color: #555555; }
.profile-bio p { margin: 0 0 4px; font-size: var(--fs-base); line-height: 1.4; }
#content .profile-bio p { font-size: var(--fs-base); }
.profile-country { color: #888888; }
.profile-frameworks a, .profile-links a { color: #0000ff; text-decoration: none; margin-right: 10px; }
.profile-frameworks a:hover, .profile-links a:hover { color: #000000; }
.profile-empty { text-align: center; padding: 80px 0; color: #888888; font-size: var(--fs-md); }
.profile-empty .btn-primary { font-size: var(--fs-base); }
.profile-tabs { display: flex; justify-content: center; gap: 40px; flex-wrap: wrap; max-width: 935px; margin: 0 auto 30px; padding: 0 15px; border-top: 1px solid #dddddd; }
.profile-tabs a { padding: 14px 0 0; margin-top: -1px; border-top: 1px solid transparent; color: #888888; text-decoration: none; font-size: var(--fs-base); }
.profile-tabs a:hover { color: #000000; }
.profile-tabs a.is-active { color: #0000ff; border-top-color: #0000ff; }
.profile-tabs__n { margin-left: 4px; }
/* Linked members (workshop participants): small round avatars with names. */
.member-list { display: flex; flex-wrap: wrap; gap: 14px 28px; list-style: none; margin: 0; padding: 0; }
.member-list li { margin: 0; }
.member-list a { display: flex; align-items: center; gap: 10px; color: #000000; text-decoration: none; }
.member-list a:hover { color: #0000ff; }
.member-list__avatar { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; background: #f1f1f1; display: flex; align-items: center; justify-content: center; color: #0000ff; flex: none; }
.member-list__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 735px) {
  .profile { padding-top: 90px; }
  .profile-header { grid-template-columns: 77px 1fr; gap: 20px; align-items: start; }
  .profile-avatar { width: 77px; height: 77px; }
  .profile-avatar span { font-size: 34px; }
  .profile-stats { gap: 20px; font-size: var(--fs-sm); }
  .profile-tabs { gap: 24px; }
}


/* ----- Content: images, galleries, videos, embeds (WP core block CSS used to do this) ----- */
/* style.css sets img { width: 100% } globally; WP's block CSS undid that for content images. */
.content img, .wiki-entry-content img { width: auto; max-width: 100%; height: auto; }
.content img[src$=".gif"], .wiki-entry-content img[src$=".gif"] { image-rendering: pixelated; }
.content video, .wiki-entry-content video { max-width: 100%; height: auto; display: block; }
.content iframe, .wiki-entry-content iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; display: block; margin: 0 0 1em; }
.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin: 0 0 1.5em; }
.gallery img { width: 100%; height: auto; display: block; }



/* ----- FAQ / interviews list (theme archive-questions.php, single-questions.php) ----- */
.questions-list { padding: 0 10px 60px; }
.questions-list a { display: block; border: none; background: #f1f1f1; padding: 10px; margin-bottom: 10px; color: #000; text-decoration: none; }
.questions-list--more a { border: 1px solid #000; background: transparent; }

/* ----- Content blocks (resources/views/blocks) ----- */
/* "Text medium" = Gutenberg's "medium" preset, which most post paragraphs used. */
#content .text-medium p, #content .text-medium li, .text-medium p, .text-medium li { font-size: var(--fs-preset-medium); }
.block-spacer { margin: 0; padding: 0; }
.gallery.gallery-2 { grid-template-columns: 1fr 1fr; }
.gallery.gallery-3 { grid-template-columns: 1fr 1fr 1fr; }
.block-quote { margin: 50px 0; padding: 0; border: 0; }
#content .block-quote p, .block-quote p { font-size: var(--fs-md); line-height: 130%; color: #000000; margin: 0; }
.block-quote cite { display: block; margin-top: 12px; font-style: normal; font-size: var(--fs-base); color: #aaaaaa; }
.block-quote cite::before { content: "— "; }
/* Card label in "What's on?": Project / News / Open Call / Interview */
.blog-grid-item__type { font-size: var(--fs-sm); color: #aaaaaa; margin-bottom: 4px; }
/* Interviews: questions blue (like the h2 of the old interview posts), answers black. */
.interview-question { color: #0000ff; }
.interview-answer, .interview-answer p { color: #000000; }
/* Wide/full blocks keep Gutenberg's alignment classes (positioned by style.css); their media fill the width. */
.alignwide img, .alignfull img, .alignwide video, .alignfull video, .alignwide iframe, .alignfull iframe { width: 100%; max-width: 100%; }
/* Images resized in the editor keep their width (importer writes <p class="img-resized">) */
.img-resized img { height: auto; }
.aligncenter { text-align: center; }
/* Gutenberg spacer blocks (dropped on import) used to give wide/full media room to breathe. */
#content .content .alignwide, #content .content .alignfull { margin-top: 50px; margin-bottom: 50px; }

/* ----- "The Crew" on the About page: theme team-grid inside Markdown content ----- */
/* Was an h2.section-title directly in #content: blue (#content h2) at --fs-md. */
#single .content h2.section-title { margin-top: 100px; text-align: center; font-size: var(--fs-md); color: #0000ff; }
#single .content .team-grid { margin-top: 30px; }
#single .content .team-grid-item__thumb { width: 100%; }
#single .content .team-grid-item__name { margin: 14px 0 6px; font-size: var(--fs-base); color: #000000; text-align: center; }


/* ----- Dashboard (theme page-dashboard.php) ----- */
.app-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; width: 100%; max-width: 960px; margin: 70px auto 75px; padding: 0 24px; }
@media (max-width: 768px) { .app-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 575px) { .app-grid { grid-template-columns: repeat(2, 1fr); } }
.app-item { display: block; text-decoration: none; width: 100%; }
.app-icon { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 1 / 1; padding: 12px; box-sizing: border-box; border-radius: 100%; border: none; background: #f1f1f1; text-align: center; font-size: var(--fs-base); line-height: 1.3; color: #000000; }
.app-item:hover .app-icon { background: #00ff00; color: #000000; }
#dashboard-settings { width: 100%; max-width: 480px; margin: 40px auto 0; padding: 0 24px; text-align: left; }
#dashboard-delete-account summary { cursor: pointer; text-align: center; }
#dashboard-settings form { margin-top: 20px; }
#dashboard-settings label { display: block; margin-bottom: 20px; }
.social-links-group { background: #f1f1f1; padding: 10px; margin-bottom: 20px; }
.social-link-group { display: flex; gap: 12px; margin-bottom: 8px; }
.social-link-group:last-child { margin-bottom: 0; }
.social-link-group input[type="text"] { flex: 0 0 35%; }
.social-link-group input[type="url"] { flex: 1; }
#dashboard-settings .social-link-group input[type="text"], #dashboard-settings .social-link-group input[type="url"] { background: #ffffff; }
#dashboard-settings textarea, #dashboard-settings input[type="url"], #dashboard-settings input[type="text"], #dashboard-settings select {
    width: 100%; margin-top: 6px; background: #f1f1f1; color: #000000; border: none; padding: 10px; font-family: inherit; font-size: var(--fs-base);
}
#dashboard-settings textarea { resize: vertical; }
.avatar-field { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.settings-avatar-preview { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; display: block; flex-shrink: 0; }
/* The theme used #111 here with black text (unreadable); light grey instead. */
.settings-notice { padding: 10px; background: #f1f1f1; margin-bottom: 20px; }
.settings-notice p { margin: 0; }
.settings-notice-error { background: #d63638; color: #ffffff; }
#dashboard-delete-account { margin-top: 32px; }
.dashboard-buttons { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
#dashboard-settings .btn-primary { white-space: nowrap; }
.btn-primary.btn-save { background: #00ff00; color: #000000; }
.btn-primary.btn-muted { background: #f1f1f1; color: #000000; }

/* ----- Shared form bits (submit, answer form) ----- */
.submit-label { display: block; margin-bottom: 28px; }
.submit-field { width: 100%; margin-top: 6px; background: #f1f1f1; border: 1px solid transparent; outline: none; box-shadow: none; font-family: inherit; font-size: var(--fs-base); padding: 10px; }
.submit-field:focus { border-color: #0000ff; }
.submit-field.has-error { border-color: #ff0000; }
textarea.submit-field { resize: none; }
.submit-hint { display: block; margin-top: 6px; font-size: var(--fs-sm); color: #888888; }
.submit-error { display: block; margin-top: 6px; font-size: var(--fs-sm); color: #ff0000; }
.submit-optional { color: #aaaaaa; font-size: var(--fs-sm); }
.submit-notice { padding: 10px; background: #f1f1f1; color: #000000; margin-bottom: 24px; }
.submit-notice-error { color: #ff0000; }
.submit-notice-error ul { margin: 0; padding-left: 18px; }

/* ----- GIF submit form: laid out like the GIF page — the GIF on the stage, the details beside it ----- */
.submit-intro { margin-top: 30px; } /* like #single under the About header */

.submit-layout { display: grid; grid-template-columns: 1fr; gap: 40px; max-width: 1100px; margin: 60px auto 100px; padding: 50px 15px 0; border-top: 1px solid #000000; }
@media (min-width: 992px) {
  .submit-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 60px; }
  .submit-stage { position: sticky; top: 90px; align-self: start; }
}
.submit-details { max-width: 512px; width: 100%; }
.submit-details legend { padding: 0; margin-bottom: 8px; font-size: var(--fs-base); }

/* Stage: a square drop zone that becomes the preview */
.submit-drop { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 1 / 1; background: #f1f1f1; cursor: pointer; text-align: center; outline: 1px dashed transparent; outline-offset: -12px; transition: outline-color .15s, background .15s; }
.submit-drop:hover, .submit-drop.is-dragging { outline-color: #0000ff; }
.submit-drop.is-dragging { background: #e6e6ff; }
.submit-drop.has-error { outline-color: #ff0000; }
.submit-drop input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; bottom: 0; left: 50%; }
.submit-drop__empty { display: flex; flex-direction: column; gap: 8px; padding: 30px; }
.submit-drop__title { font-size: var(--fs-md); color: #0000ff; }
.submit-drop__hint { font-size: var(--fs-sm); color: #888888; }
.submit-drop__again { font-size: var(--fs-sm); color: #ff0000; }
.submit-drop.is-filled .submit-drop__empty { display: none; }
.submit-drop.is-filled { background: #ffffff; cursor: default; }
.submit-drop__preview { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }

/* Live measurements under the stage */
.submit-measure { margin-top: 16px; font-size: var(--fs-sm); }
.submit-measure__size { font-size: var(--fs-md); margin-bottom: 8px; }
.submit-measure__bar { height: 6px; background: #f1f1f1; }
.submit-measure__bar span { display: block; height: 100%; width: 0; background: #00ff00; transition: width .3s; }
.submit-measure.is-too-big .submit-measure__bar span { background: #ff0000; }
.submit-measure.is-too-big .submit-measure__size { color: #ff0000; }
.submit-measure__facts { margin-top: 8px; color: #888888; }
.submit-measure__problem { margin-top: 8px; color: #ff0000; }
.submit-measure__change { margin-top: 10px; color: #0000ff; }

/* Series: the name field only when "+ New series" is picked (no JS needed). */
.submit-series__new { display: none; margin-top: 12px; }
.submit-series:has(input[value="new"]:checked) .submit-series__new { display: block; }
/* Frameworks and AI: pill toggles (.pill above) */
.submit-fieldset { border: none; padding: 0; margin: 0 0 28px; }
.submit-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.submit-pill { position: relative; cursor: pointer; margin: 0; }
.submit-pill input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.submit-pill:hover .pill { border-color: #0000ff; color: #0000ff; }
.submit-pill input:checked + .pill { background: #0000ff; border-color: #0000ff; color: #ffffff; }
.submit-pill input:focus-visible + .pill { outline: 2px solid #0000ff; outline-offset: 2px; }

/* Permissions */
.submit-permissions { background: #f1f1f1; padding: 16px 18px 4px; }
.submit-consent { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; cursor: pointer; font-size: var(--fs-sm); line-height: 1.4; }
.submit-consent input { width: auto; margin: 3px 0 0; flex-shrink: 0; accent-color: #0000ff; }

.submit-button { border: 0; cursor: pointer; }
.submit-button:disabled { background: #cccccc !important; color: #ffffff !important; cursor: not-allowed; }

/* Thank-you view */
.submit-done__title { font-size: var(--fs-md); line-height: 1.2; }

/* ----- Tools (theme archive-tools.php / single-tools.php) ----- */
.app-grid--tools { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important; gap: 16px; max-width: 1200px; margin: 0 auto 100px; padding: 0 15px; }
/* Tool tiles (2026-11-03): grey square-ish tile, title + one line, like the cards. */
.tool-tile { display: flex; flex-direction: column; justify-content: space-between; gap: 24px; min-height: 200px; padding: 22px; background: #f1f1f1; color: #000000 !important; text-decoration: none; }
.tool-tile:hover { background: #0000ff; color: #ffffff !important; }
.tool-tile__title { font-size: var(--fs-md); line-height: 1.1; }
.tool-tile__text { font-size: var(--fs-sm); line-height: 1.4; }
/* The Slide Tool is its own app in a frame. */
.tool-frame { display: block; width: 100%; height: calc(100vh - 140px); min-height: 720px; border: 0; }
/* Self-contained centering (not .alignwide, which assumes a .content ancestor). */
#single.tool-app-section { width: 100%; max-width: 1000px; margin: 0 auto; padding: 100px 15px; }
#single.tool-app-section--wide { max-width: none; padding: 40px 0 0; }

/* ----- Interview answer form ----- */
.answer-question { margin-bottom: 40px; }
.answer-question__text { display: block; color: #0000ff; font-size: var(--fs-md); line-height: 1.3; margin-bottom: 6px; }

/* ----- Navigation (2026-11-01): Explore left, about/taking part right ----- */
@media (min-width: 792px) {
  /* The theme's fixed 320px side columns are too narrow for the new items. */
  #main-navigation { grid-template-columns: 1fr auto 1fr; padding: 0 10px; }
}
.nav-dot { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: #ff0000; vertical-align: middle; position: relative; top: -1px; animation: nav-dot-blink 1.2s steps(1, end) infinite; }
@keyframes nav-dot-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .nav-dot { animation: none; } }
#main-navigation .nav-action a { background: #ffffff; color: #0000ff; padding: 2px 12px; border-radius: 999px; line-height: 1.4; }
#main-navigation .nav-action a:hover { background: #00ff00; color: #000000; }
@media (min-width: 792px) and (max-width: 999.98px) {
  #main-navigation .menu li.nav-wide-only { display: none; } /* still in the footer and the mobile menu */
}

/* Mobile overlay: taking part first, then three labelled columns */
.mobile-menu-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.mobile-menu-pill { display: inline-block; padding: 8px 18px; border: 1px solid #ffffff; border-radius: 999px; font-size: var(--fs-base); text-decoration: none; }
.mobile-menu-pill.is-primary { background: #ffffff; color: #0000ff !important; }
.mobile-menu-call { display: block; margin-top: 24px; font-size: var(--fs-base); text-decoration: none; }
#main-navigation-mobile-overlay .mobile-menu-grid { grid-template-columns: 1fr 1fr; gap: 30px 20px; margin-top: 40px; }
.mobile-menu-heading { margin: 0 0 8px; font-size: var(--fs-sm); color: rgba(255, 255, 255, .6); }
/* Mobile bar + overlay, finer (Tim 2026-11-03): 40px bar like the desktop one, menu-size type, normal-size links. */
@media (max-width: 791px) {
  #main-navigation-mobile { height: 40px; padding: 0 10px; }
  #main-navigation-mobile #logo-mobile { font-size: 20px; line-height: 1; }
  #main-navigation-mobile-overlay-trigger { font-size: var(--fs-sm); }
  #main-navigation-mobile-right .nav-avatar { width: 26px; height: 26px; max-width: 26px; }
  #main-navigation-mobile-overlay { padding: 60px 16px 40px; }
  #main-navigation-mobile-overlay ul { font-size: var(--fs-base); line-height: 1.6; }
  #main-navigation-mobile-overlay .mobile-menu-grid { margin-top: 32px; gap: 24px 20px; }
  #main-navigation-mobile-overlay .mobile-menu-actions { margin-top: 0; gap: 8px; }
  #main-navigation-mobile-overlay .mobile-menu-pill { padding: 3px 14px; font-size: var(--fs-sm); }
  #main-navigation-mobile-overlay .mobile-menu-call { margin-top: 20px; font-size: var(--fs-sm); }
}

/* Footer: four columns, legal links below */
.footer-columns > div { margin-bottom: 24px; }
.footer-legal { display: flex; gap: 18px; margin: 16px 0 0; font-size: var(--fs-sm); }
.footer-legal a { color: #888888; }
.footer-legal a:hover { color: #0000ff; }
.footer-heading { margin: 0 0 8px; font-size: var(--fs-sm); color: #888888; }

/* ----- Home: take part, open call band, join band ----- */
.home-open-call { background: #f1f1f1; color: #000000; padding-left: 15px; padding-right: 15px; width: min(1200px, calc(100% - 40px)); margin-left: auto; margin-right: auto; } /* wide width like .alignwide, not full bleed */
.home-open-call__inner { max-width: 760px; margin: 0 auto; text-align: center; }
.home-open-call__label { font-size: var(--fs-sm); opacity: .8; margin: 0 0 10px; }
#content .home-open-call__label, .home-open-call__label { color: #000000; }
.home-open-call__title { font-size: var(--fs-lg); line-height: 1.05; margin: 0 0 20px; }
.home-open-call__title a { color: #000000; text-decoration: none; }
.home-open-call__title a:hover, .home-open-call__more:hover { color: #0000ff; }
.home-open-call__text { font-size: var(--fs-base); line-height: 1.4; margin: 0 0 30px; }
.home-open-call__actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 24px; margin: 0; }
.home-open-call__more { color: #000000; text-decoration: underline; }

/* ----- Cards (projects, news, open calls, interviews): square grey tile like the GIF grid ----- */
/* The cover is never cropped. Pixel art (GIFs, small images) is scaled up with hard pixels, photos smoothly. */
.card-thumb, #whats-new-grid .card-thumb, #category-archive-grid .card-thumb {
  display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 1 / 1; background: #f1f1f1; overflow: hidden;
}
.card-thumb__img { display: block; width: 100%; height: 100%; object-fit: contain; }
.card-thumb__img.is-pixel { width: 70%; height: 70%; image-rendering: pixelated; }
.card-thumb:hover { background: #e6e6ff; }

/* ----- Projects overview: full width, 5 cards per row on large screens ----- */
.projects-archive { padding: 75px 0 0; }
#projects-grid { max-width: none; }
#projects-grid .blog-grid-item__title a { color: #000000; }
#projects-grid .blog-grid-item__title a:hover { color: #0000ff; }
@media (min-width: 1200px) { .col-xl-5th { flex: 0 0 auto; width: 20%; } }

/* ----- Image blocks always fill their column (text width, wide or full) ----- */
.content .block-image img, .wiki-entry-content .block-image img, .block-image img { display: block; width: 100%; max-width: 100%; height: auto; }

/* ----- Home, first viewport: the stage (giant 128KB + tilting featured GIF) and a bar with what it is / what to do ----- */
/* Stage + bar together fill the first screen below the 40px nav bar. */
/* The stage leaves room so the text starts on the first screen. */
#index-hero { height: calc(100svh - 40px - 120px); min-height: 420px; margin-bottom: 0; }
.index-hero__gifs { gap: 14px; }
.index-hero__gifs .gif-img-wrapper { max-height: 62%; }
.index-hero__gif { image-rendering: pixelated; }
.index-hero__credit { position: relative; z-index: 3; font-size: var(--fs-sm); color: #888888 !important; text-decoration: none; background: #ffffff; padding: 2px 8px; }
.index-hero__credit:hover { color: #0000ff !important; }
.pill.is-primary { background: #0000ff; border-color: #0000ff; color: #ffffff; }
a.pill.is-primary:hover { background: #000000; border-color: #000000; color: #ffffff; }

/* Below the stage: one text — the prompt, what it means, the live numbers. */
.home-intro { padding-left: 15px; padding-right: 15px; text-align: center; }
.home-intro__text { max-width: 760px; margin: 0 auto; }
.home-intro__text p { font-size: var(--fs-preset-medium); line-height: 1.35; }
@media (max-width: 791.98px) {
  /* Phone: a shorter stage so the text starts on the first screen. */
  #index-hero { height: calc(100svh - 60px - 150px); min-height: 300px; }
  /* Smaller GIF so the giant 128KB stays readable on both sides. */
  .index-hero__gifs .gif-img-wrapper { max-width: 46vw; }
}

/* ----- Home: one vertical rhythm ----- */
/* Every section is separated by the same gap; titles sit the same distance above their content;
   coloured bands (open call, What's on?) carry the gap inside, so their edges line up with the rhythm. */
:root { --home-gap: clamp(80px, 8vw, 128px); --home-title-gap: 40px; }
body.home .home-section { margin: 0; padding-top: var(--home-gap); padding-bottom: 0; }
body.home .home-section--band { padding-bottom: var(--home-gap); margin-top: var(--home-gap); padding-top: var(--home-gap); }
body.home .home-section--band + .home-section--band { margin-top: 0; }
body.home .home-open-call, body.home .home-join { margin-left: auto; margin-right: auto; } /* wide band centered; .home-section above resets margins */
body.home .home-section--last { padding-bottom: var(--home-gap); }
body.home .home-intro { padding-top: 28px; } /* directly under the stage */
body.home .home-section .section-title { padding: 0 10px var(--home-title-gap); }
/* Above a GIF grid the headline needs more air than above cards (Tim 2026-11-03). */
body.home #latest-submissions .section-title, body.home #random-gifs .section-title { padding-bottom: calc(var(--home-title-gap) + 30px); }
body.home .home-section .section-cta { padding: var(--home-title-gap) 15px 0; }
body.home #whats-new { background: #f1f1f1; }
body.home #footer { margin-top: 0; }

/* ----- Wiki: a handbook — contents page, and articles in three columns (nav · text · on this page) ----- */
.wiki-lead { max-width: 700px; margin: 30px auto 0; padding: 0 15px; text-align: center; font-size: var(--fs-preset-medium); line-height: 1.35; }
.wiki-contents { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; max-width: 1100px; margin: 80px auto 0; padding: 0 24px 100px; }
@media (max-width: 767.98px) { .wiki-contents { grid-template-columns: 1fr; gap: 32px; } }
.wiki-contents__label, .wiki-nav-group__label { margin: 0 0 10px; font-size: var(--fs-sm); color: #888888; }
#content .wiki-contents__label { font-size: var(--fs-sm); color: #888888; padding: 0; text-align: left; }
.wiki-contents ul, .wiki-nav-group ul, .wiki-toc ul, .wiki-children ul { list-style: none; margin: 0; padding: 0; }
.wiki-contents li { padding: 12px 0; border-top: 1px solid #e5e5e5; }
.wiki-contents li.is-child { padding-left: 16px; }
.wiki-contents a { font-size: var(--fs-md); line-height: 1.2; color: #000000; text-decoration: none; }
.wiki-contents a:hover { color: #0000ff; }
.wiki-contents__summary { display: block; margin-top: 4px; font-size: var(--fs-sm); color: #888888; }
.wiki-empty-note { display: block; margin-top: 4px; font-size: var(--fs-sm); color: #ff0000; }

#content.wiki { display: grid; grid-template-columns: 220px minmax(0, 1fr) 200px; gap: 56px; max-width: 1280px; margin: 0 auto; padding: 120px 24px 100px; }
.wiki-side { position: sticky; top: 70px; align-self: start; max-height: calc(100vh - 90px); overflow-y: auto; font-size: var(--fs-sm); }
.wiki-contents-toggle > summary { display: none; }
.wiki-filter { width: 100%; margin: 0 0 20px; padding: 8px 10px; border: 0; background: #f1f1f1; font: inherit; font-size: var(--fs-sm); outline: none; }
.wiki-filter:focus { box-shadow: inset 0 0 0 1px #0000ff; }
.wiki-nav-group { margin-bottom: 22px; }
.wiki-nav-group li { margin: 0 0 6px; }
.wiki-nav-group li.is-child { padding-left: 12px; }
.wiki-nav-group a, .wiki-toc a { color: #aaaaaa; text-decoration: none; } /* inactive links light grey (Tim 2026-11-03); hover/current blue */
.wiki-nav-group a:hover, .wiki-toc a:hover, .wiki-nav-group a.is-current, .wiki-toc a.is-current { color: #0000ff; }

.wiki-article { min-width: 0; max-width: 700px; }
#content .wiki-article__meta, .wiki-article__meta { margin: 0 0 10px; font-size: var(--fs-sm); color: #888888; }
.wiki-article__meta a { color: #888888; text-decoration: none; }
.wiki-article__meta a:hover { color: #0000ff; }
#content .wiki-article__title { margin: 0 0 40px; padding: 0; font-size: var(--fs-lg); line-height: 1.05; text-align: left; }
.wiki-article .content { max-width: none; margin: 0; padding: 0; }
.wiki-article .content h2 { margin: 56px 0 16px; font-size: var(--fs-md); color: #0000ff; }
.wiki-article .content h3 { margin: 32px 0 10px; font-size: var(--fs-base); color: #000000; }
.wiki-article .content > :first-child, .wiki-article .content > :first-child > :first-child { margin-top: 0; }
.wiki-article [id] { scroll-margin-top: 80px; }
/* Tables: a calm grid of thin lines */
.wiki-article table { width: 100%; border: 0; border-collapse: collapse; margin: 0 0 1.5em; font-size: var(--fs-sm); }
.wiki-article th, .wiki-article td { padding: 8px 12px 8px 0; border: 0; border-bottom: 1px solid #e5e5e5; text-align: left; vertical-align: top; }
.wiki-article th { color: #888888; border-bottom-color: #000000; }
.wiki-children { margin-top: 48px; }
.wiki-children li { margin-bottom: 6px; }
.wiki-children a { color: #0000ff; text-decoration: none; }
.wiki-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 72px; }
.wiki-pager a { display: block; padding-top: 14px; border-top: 1px solid #000000; color: #000000; text-decoration: none; font-size: var(--fs-base); line-height: 1.3; }
.wiki-pager a:hover { color: #0000ff; }
.wiki-pager span { display: block; margin-bottom: 2px; font-size: var(--fs-sm); color: #888888; }
.wiki-pager__next { grid-column: 2; text-align: right; }
.wiki-toc li { margin: 0 0 8px; line-height: 1.3; }
.wiki-toc li.is-sub { padding-left: 12px; }

@media (max-width: 991.98px) {
  #content.wiki { grid-template-columns: 1fr; gap: 24px; padding-top: 90px; }
  .wiki-side { position: static; max-height: none; }
  .wiki-side--toc { display: none; }
  .wiki-contents-toggle { background: #f1f1f1; padding: 12px 14px; }
  .wiki-contents-toggle > summary { display: block; cursor: pointer; font-size: var(--fs-base); }
  .wiki-contents-toggle[open] > summary { margin-bottom: 14px; }
  .wiki-filter { background: #ffffff; }
}

/* ----- Dashboard (members' area): header like the profile, then one column of sections ----- */
#content.dashboard { max-width: 860px; margin: 0 auto; padding: 140px 15px 100px; }
.dashboard-head { display: grid; grid-template-columns: 120px 1fr; gap: 28px; align-items: center; margin-bottom: 40px; }
.dashboard-head__avatar { display: flex; align-items: center; justify-content: center; width: 120px; height: 120px; border-radius: 50%; overflow: hidden; background: #f1f1f1; text-decoration: none; }
.dashboard-head__avatar img { width: 100%; height: 100%; object-fit: cover; }
.dashboard-head__avatar span { font-size: 52px; color: #0000ff; }
#content .dashboard-head__title { margin: 0 0 4px; padding: 0; font-size: var(--fs-lg); line-height: 1.05; text-align: left; }
#content .dashboard-head__line { margin: 0 0 16px; font-size: var(--fs-sm); }
.dashboard-head__line a { color: #888888; text-decoration: none; }
.dashboard-head__line a:hover { color: #0000ff; }
.dashboard-head__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; }
.dashboard-head__actions form { margin: 0; }
button.pill { background: #ffffff; cursor: pointer; font-family: inherit; }
button.pill:hover { border-color: #0000ff; color: #0000ff; }
.pill--danger:hover { border-color: #ff0000 !important; color: #ff0000 !important; }
.dashboard-notice { padding: 12px 16px; background: #f1f1f1; margin: 0 0 24px; }

.dashboard-section { padding: 48px 0 0; margin-top: 48px; border-top: 1px solid #e5e5e5; }
#content .dashboard-section__title { margin: 0 0 6px; padding: 0; font-size: var(--fs-md); color: #000000; text-align: left; }
#content .dashboard-section__intro { margin: 0 0 24px; font-size: var(--fs-sm); color: #888888; }
.dashboard-section__intro a { color: #0000ff; text-decoration: none; }
.dashboard-section--danger #content .dashboard-section__title, .dashboard-section--danger .dashboard-section__title { color: #ff0000 !important; }

/* Your GIFs: thumbnail · title + status · actions */
.dashboard-gifs { list-style: none; margin: 0; padding: 0; }
.dashboard-gif { display: grid; grid-template-columns: 72px 1fr auto; gap: 18px; align-items: center; padding: 12px 0; border-bottom: 1px solid #f1f1f1; }
.dashboard-gif__thumb { display: flex; align-items: center; justify-content: center; width: 72px; height: 72px; background: #f1f1f1; }
.dashboard-gif__thumb img { max-width: 100%; max-height: 100%; width: auto; height: auto; image-rendering: pixelated; }
.dashboard-gif__info { min-width: 0; }
.dashboard-gif__title { display: block; color: #000000; text-decoration: none; font-size: var(--fs-base); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-gif__title:hover { color: #0000ff; }
.dashboard-gif__meta { font-size: var(--fs-sm); color: #888888; }
.dashboard-gif__pending { color: #0000ff; }
.dashboard-gif__actions { display: flex; gap: 8px; }
.dashboard-gif__actions form { margin: 0; }
.dashboard-empty { padding: 40px; background: #f1f1f1; text-align: center; }
.dashboard-empty p { margin: 0 0 16px; }

/* Forms in the dashboard: the grey fields of the submit form */
.dashboard-form label { display: block; margin-bottom: 20px; }
.dashboard-form input[type="text"], .dashboard-form input[type="url"], .dashboard-form select, .dashboard-form textarea {
  display: block; width: 100%; margin-top: 6px; padding: 10px; border: 1px solid transparent; background: #f1f1f1; font: inherit; font-size: var(--fs-base); color: #000000; outline: none;
}
.dashboard-form input:focus, .dashboard-form select:focus, .dashboard-form textarea:focus { border-color: #0000ff; }
.dashboard-form textarea { resize: vertical; }
.dashboard-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.dashboard-fieldset { border: 0; padding: 0; margin: 0 0 24px; }
.dashboard-fieldset legend { padding: 0; margin-bottom: 8px; }
.dashboard-fieldset .social-link-group input { margin-top: 0; }
.dashboard-file input { margin-top: 6px; }
.dashboard-mono { font-family: var(--mono); background: #f1f1f1; padding: 1px 5px; }
.dashboard-delete { background: #ff0000 !important; color: #ffffff !important; }

@media (max-width: 575.98px) {
  #content.dashboard { padding-top: 100px; }
  .dashboard-head { grid-template-columns: 72px 1fr; gap: 16px; }
  .dashboard-head__avatar { width: 72px; height: 72px; }
  .dashboard-head__avatar span { font-size: 30px; }
  .dashboard-form__row { grid-template-columns: 1fr; }
  .dashboard-gif { grid-template-columns: 56px 1fr; }
  .dashboard-gif__thumb { width: 56px; height: 56px; }
  .dashboard-gif__actions { grid-column: 2; }
}

/* Dashboard: sub-forms inside a section (email, password) */
.dashboard-subform { margin-bottom: 32px; }
#content .dashboard-subform__title { margin: 0 0 12px; padding: 0; font-size: var(--fs-base); color: #000000; text-align: left; }
.dashboard-form input[type="email"], .dashboard-form input[type="password"] {
  display: block; width: 100%; margin-top: 6px; padding: 10px; border: 1px solid transparent; background: #f1f1f1; font: inherit; font-size: var(--fs-base); color: #000000; outline: none;
}
.dashboard-section__link { font-size: var(--fs-sm); color: #0000ff; text-decoration: none; }

.dashboard-gif[hidden] { display: none; }
.dashboard-more { display: flex; align-items: center; gap: 14px; margin: 20px 0 0; }
.dashboard-more__count { font-size: var(--fs-sm); color: #888888; }

/* Workshop page: participants (linked members) below the text. */
.workshop-participants { margin-top: 60px; }
.workshop-participants .member-list { margin-top: 20px; }
.post-by a { color: #0000ff; text-decoration: none; }
.post-by a:hover { color: #000000; }

/* ----- Breadcrumbs under every h1 (x-breadcrumbs): light grey, slashes between ----- */
.breadcrumbs { margin: 24px 0 0; padding: 0 10px; font-size: var(--fs-sm); color: #aaaaaa; }
.breadcrumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 0; }
.breadcrumbs li { margin: 0; color: #aaaaaa; font-size: var(--fs-sm); }
.breadcrumbs li + li::before { content: "/"; margin: 0 8px; color: #aaaaaa; }
.breadcrumbs a { color: #aaaaaa; text-decoration: none; }
.breadcrumbs a:hover { color: #0000ff; }
.breadcrumbs--left { padding: 0; }
.breadcrumbs--left ol { justify-content: flex-start; }
/* Pages whose own content starts right under the header (tags, tools, FAQ, login…): same header as About, then a gap. */
#content .page-header { margin-bottom: 75px; }
/* Tag archive: tag cloud, then room before the GIF grid. */
.tags-archive { margin-bottom: 100px; }
.tags-archive__list { margin-bottom: 75px !important; padding: 0 15px; }
/* Left-aligned headers: breadcrumbs sit right under the title. */
#content .wiki-article__title { margin-bottom: 0; }
.wiki-breadcrumbs { margin: 14px 0 40px; }
.dashboard-breadcrumbs { margin: 8px 0 8px; }

/* ----- Motion (public/js/motion.js) ----- */
/* View transitions between pages: a quick crossfade; the clicked GIF morphs into the GIF page's stage. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .25s; }
.single-gifs #gif-stage .gif-img-wrapper img { view-transition-name: gif-hero; }
::view-transition-group(gif-hero) { animation-duration: .5s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
::view-transition-old(gif-hero), ::view-transition-new(gif-hero) { image-rendering: pixelated; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* ----- Series (2026-11-03): /@handle/series/{slug}, GIF page, dashboard ----- */
.series-byline { margin: 10px 0 0; text-align: center; }
.series-description { margin-top: 30px; text-align: center; }
.series-own { text-align: center; margin: 20px 0 0; }
.series-gifs { padding: 50px 0 100px; }
.series-nav { display: flex; justify-content: space-between; gap: 20px; margin: 20px 0 0; font-size: var(--fs-sm); }
.series-nav__next { margin-left: auto; text-align: right; }
.gif-series { margin-bottom: 50px; }
.project-gifs { padding: 50px 0 0; }
.project-gifs:last-child { padding-bottom: 100px; }
.series-edit { width: 100%; max-width: 640px; margin: 50px auto 0; padding: 0 15px; text-align: left; }
.series-delete { margin: 40px auto 100px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.series-order { list-style: none; margin: 0 0 8px; padding: 0; }
.series-order__item { display: flex; align-items: center; gap: 14px; padding: 8px 0; border-bottom: 1px solid #e5e5e5; margin: 0; }
.series-order__n { width: 2ch; color: #aaaaaa; font-size: var(--fs-sm); }
.series-order__thumb { width: 56px; height: 56px; object-fit: contain; background: #f1f1f1; }
.series-order__title { flex: 1; }
.series-order__moves { display: flex; gap: 6px; }
.series-order__moves .pill:disabled { opacity: .3; cursor: default; }

/* Profile tabs: card rows centered like the GIF grid (a short row sits in the middle, not on the left). */
.profile-page .blog-grid-items { justify-content: center; }
/* /authors: room before the footer like the other archive pages. */
.creators-page .authors-featuring { padding-bottom: 100px; }

/* Video blocks (own files and YouTube/Vimeo): a light shadow so they stand off the white page (Tim 2026-11-03). */
.content .video video, .content .embed iframe, .wiki-entry-content .video video, .wiki-entry-content .embed iframe { box-shadow: 0 2px 6px rgba(0, 0, 0, .08), 0 12px 32px rgba(0, 0, 0, .10); }

/* ----- Styleguide /styleguide (admins only): only the page's own scaffolding, specimens use the real classes ----- */
.styleguide-page .sg-toc { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; margin: 30px 0 0; padding: 0 15px; font-size: var(--fs-sm); }
.sg-section { max-width: 1200px; margin: 0 auto; padding: 80px 15px 0; }
.sg-section:last-child { padding-bottom: 120px; }
.sg-title { font-size: var(--fs-lg); line-height: 1.05; margin: 0 0 30px; padding-top: 30px; border-top: 1px solid #000000; }
.sg-subtitle { font-size: var(--fs-base); margin: 50px 0 16px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; }
.sg-note { color: #888888; font-size: var(--fs-sm); max-width: 700px; margin: 0 0 24px; }
.sg-label { display: inline-block; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; color: #888888; }
.sg-label--center { display: block; text-align: center; margin-top: 8px; }
.sg-frame { border: 1px dashed #e5e5e5; padding: 20px 0; margin-bottom: 20px; }
.sg-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 20px; }
.sg-swatch { display: flex; flex-direction: column; gap: 6px; }
.sg-swatch__chip { display: block; height: 80px; border: 1px solid #e5e5e5; }
.sg-swatch__use { font-size: var(--fs-sm); }
.sg-type-row { display: grid; grid-template-columns: 220px 1fr; gap: 20px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid #e5e5e5; }
@media (max-width: 700px) { .sg-type-row { grid-template-columns: 1fr; gap: 4px; } }
.sg-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 30px; padding: 24px 0; border-bottom: 1px solid #e5e5e5; }
.sg-row--blue { background: #0000ff; padding: 24px 20px; border: 0; }
.sg-row--blue .sg-label { color: rgba(255, 255, 255, .7); }
.sg-item { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.sg-form { max-width: 560px; }
.sg-search { margin: 0 auto 0; }

/* Home: "Join 128KB" band for guests, same look as the open call band (grey, wide width), last on the page. */
.home-join { background: #f1f1f1; color: #000000; padding-left: 15px; padding-right: 15px; width: min(1200px, calc(100% - 40px)); }
body.home .home-join { margin-bottom: var(--home-gap); }

/* Login / join / password pages: a narrow column like the dashboard settings, small links under the button. */
.auth-form { max-width: 520px; margin-bottom: 100px; }
#content .auth-links { margin: 20px 0 0; font-size: var(--fs-sm); }
#content .auth-links + .auth-links { margin-top: 6px; }

/* File inputs everywhere (join, dashboard avatar): the browser's grey button becomes a pill. */
input[type=file] { font-family: inherit; font-size: var(--fs-sm); color: #888888; }
input[type=file]::file-selector-button { margin-right: 12px; padding: 6px 14px; border: 1px solid #000000; border-radius: 999px; background: #ffffff; color: #000000; font-family: inherit; font-size: var(--fs-sm); cursor: pointer; }
input[type=file]::file-selector-button:hover { border-color: #0000ff; color: #0000ff; }

/* ----- Block "Bühne" (blocks/stage): 1–5 GIFs centered on a grey surface; all the same height, pixels stay crisp ----- */
.block-stage { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: clamp(16px, 3vw, 48px); padding: clamp(40px, 6vw, 90px) clamp(16px, 4vw, 60px); background: #f1f1f1; margin: 50px 0; }
.block-stage__gif { display: block; flex: 0 1 auto; }
.block-stage__gif img { display: block; width: auto; max-width: 100%; height: clamp(120px, 22vw, 300px); image-rendering: pixelated; }
/* More GIFs → a bit smaller, so up to five fit in one row on desktop. */
.block-stage--4 .block-stage__gif img { height: clamp(100px, 16vw, 240px); }
.block-stage--5 .block-stage__gif img { height: clamp(90px, 13vw, 200px); }

/* Profile: the GIF grid sits in the same 935px column as the header and the tabs. */
.profile-grid { max-width: 935px; margin: 0 auto; padding: 0 15px 100px; }
/* …and five GIFs per row there on desktop (Tim 2026-11-03); tablet/phone as everywhere (3 / 2). */
@media (min-width: 992px) {
  .profile-grid .gif-grid-item { flex-basis: calc(20% - 1rem); max-width: calc(20% - 1rem); }
}

/* Admin corner link (layouts/app, admins only): small, quiet, always there. */
.admin-corner { position: fixed; right: 12px; bottom: 12px; z-index: 9000; padding: 3px 10px; border-radius: 999px; background: #ffffff; border: 1px solid #e5e5e5; color: #888888 !important; font-size: 12px; line-height: 1.4; text-decoration: none; opacity: .8; }
.admin-corner:hover { opacity: 1; border-color: #0000ff; color: #0000ff !important; }

/* ----- One text size in content (Tim 2026-11-03): text, lists, tables and all headings the same size,
   a bit smaller than the old "text medium"; headings are blue. Quotes and code keep their own look. ----- */
:root { --fs-content: clamp(17px, 14px + 0.7vw, 24px); }
#content .content :is(p, li, td, th, h2, h3, h4), #content .content .block-text p, #content .content .block-list li { font-size: var(--fs-content); line-height: 1.4; }
#content .content :is(h2, h3, h4) { color: #0000ff; margin: 1.6em 0 .4em; }
/* Same paragraph spacing everywhere — the wiki lost it to the theme's "article p { margin: 0 }". */
#content .content .block-text p, #content .content .interview-answer p { margin: 0 0 1em; }
#content .content .block-quote p { font-size: calc(var(--fs-content) * 1.35); }