/*
Theme Name: Blocksy Child - custom portfolio
Description: Zwei-Spalten-Layout (Masonry links, fixed Sidebar rechts) — Typografie + Overlays
Version: 1.4
Template: blocksy
*/

/* -------------------------
   Webfonts (Geomanist local)
   ------------------------- */
@font-face {
  font-family: "Geomanist";
  src: url("assets/fonts/geomanist-thin-webfont.woff2") format("woff2"),
       url("assets/fonts/geomanist-thin-webfont.woff") format("woff");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geomanist";
  src: url("assets/fonts/geomanist-thin-italic-webfont.woff2") format("woff2"),
       url("assets/fonts/geomanist-thin-italic-webfont.woff") format("woff");
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Geomanist";
  src: url("assets/fonts/geomanist-extralight-webfont.woff2") format("woff2"),
       url("assets/fonts/geomanist-extralight-webfont.woff") format("woff");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geomanist";
  src: url("assets/fonts/geomanist-extralight-italic-webfont.woff2") format("woff2"),
       url("assets/fonts/geomanist-extralight-italic-webfont.woff") format("woff");
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Geomanist";
  src: url("assets/fonts/geomanist-light-webfont.woff2") format("woff2"),
       url("assets/fonts/geomanist-light-webfont.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geomanist";
  src: url("assets/fonts/geomanist-light-italic-webfont.woff2") format("woff2"),
       url("assets/fonts/geomanist-light-italic-webfont.woff") format("woff");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Geomanist";
  src: url("assets/fonts/geomanist-book-webfont.woff2") format("woff2"),
       url("assets/fonts/geomanist-book-webfont.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geomanist";
  src: url("assets/fonts/geomanist-book-italic-webfont.woff2") format("woff2"),
       url("assets/fonts/geomanist-book-italic-webfont.woff") format("woff");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Geomanist";
  src: url("assets/fonts/geomanist-regular-webfont.woff2") format("woff2"),
       url("assets/fonts/geomanist-regular-webfont.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geomanist";
  src: url("assets/fonts/geomanist-regular-italic-webfont.woff2") format("woff2"),
       url("assets/fonts/geomanist-regular-italic-webfont.woff") format("woff");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Geomanist";
  src: url("assets/fonts/geomanist-medium-webfont.woff2") format("woff2"),
       url("assets/fonts/geomanist-medium-webfont.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geomanist";
  src: url("assets/fonts/geomanist-medium-italic-webfont.woff2") format("woff2"),
       url("assets/fonts/geomanist-medium-italic-webfont.woff") format("woff");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Geomanist";
  src: url("assets/fonts/geomanist-bold-webfont.woff2") format("woff2"),
       url("assets/fonts/geomanist-bold-webfont.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geomanist";
  src: url("assets/fonts/geomanist-bold-italic-webfont.woff2") format("woff2"),
       url("assets/fonts/geomanist-bold-italic-webfont.woff") format("woff");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Geomanist";
  src: url("assets/fonts/geomanist-ultra-webfont.woff2") format("woff2"),
       url("assets/fonts/geomanist-ultra-webfont.woff") format("woff");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geomanist";
  src: url("assets/fonts/geomanist-ultra-italic-webfont.woff2") format("woff2"),
       url("assets/fonts/geomanist-ultra-italic-webfont.woff") format("woff");
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Geomanist";
  src: url("assets/fonts/geomanist-black-webfont.woff2") format("woff2"),
       url("assets/fonts/geomanist-black-webfont.woff") format("woff");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geomanist";
  src: url("assets/fonts/geomanist-black-italic-webfont.woff2") format("woff2"),
       url("assets/fonts/geomanist-black-italic-webfont.woff") format("woff");
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Marksy";
  src: url("assets/fonts/MARKSY - Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* --------- CSS-Variablen ---------- */
:root{
  --sidebar-width: clamp(242px, 23.2vw, 330px); /* Rechte Spalte schmaler */
  --sidebar-collapsed-width: 68px;
  --sidebar-pad-y: 40px;
  --sidebar-pad-x: 28px;
  --sidebar-collapsed-pad-x: 12px;
  --sidebar-title-offset: 12px;
  --sidebar-toggle-bottom: 42px;
  --sidebar-fade-duration: 220ms;
  --sidebar-shrink-duration: 380ms;
  --gap: clamp(58px, 6.2vw, 118px);

  --font-sans: "Geomanist", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  --font-serif: "Geomanist", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  --font-sketch: "Marksy", "Geomanist", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  --accent: #0f2a3a;
  --muted: #8b8b8b;
  --text: #0033A0;
  --bg: #ffffff;
  --border: #eee;
}

/* --------- Basis ---------- */
html,body {
  height: 100%;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--text);
  background: var(--bg);
  background-color: var(--bg) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img {
  -webkit-user-drag: none;
  user-select: none;
}

/* Force all text to blue */
body,
body * {
  color: var(--text);
}

/* Theme toggle (blue background + white text) */
body.theme-alt {
  --bg: #0033A0;
  --text: #ffffff;
  --border: rgba(255,255,255,0.35);
}

body.theme-alt .left-col {
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.18) 1.2px, transparent 1.2px);
}

body.theme-alt .project-slides {
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.18) 1.2px, transparent 1.2px);
}

/* Sketch Book */
.sketch-board {
  position: relative;
  width: 100%;
  height: calc(100vh - 112px);
}

.sketch-tools-wrap {
  position: sticky;
  top: 12px;
  z-index: 4;
}

.sketch-tools-toggle {
  display: none;
  border: none;
  background: transparent;
  color: var(--text);
  padding: 0;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 400;
  cursor: pointer;
}

.sketch-tools {
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: 18px;
  padding: 10px 0 16px;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
}

.tool-btn {
  border: none;
  background: transparent;
  color: var(--text);
  padding: 0;
  border-radius: 0;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 400;
  cursor: pointer;
  line-height: 1.1;
  min-height: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-transform: none;
  flex: 0 0 auto;
  text-decoration: none;
}

.tool-btn.is-active {
  font-weight: 700;
  text-decoration: none;
}

.tool-group {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  border: none;
  background: transparent;
  color: var(--text);
  padding: 0;
  border-radius: 0;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 400;
  position: relative;
  overflow: visible;
  min-height: auto;
  line-height: 1.1;
  white-space: nowrap;
  flex: 0 0 auto;
  transform: translateY(1px);
}

.tool-group input[type="range"] {
  width: 140px;
  accent-color: var(--text);
  margin: 0;
  position: relative;
  top: 1px;
}

.tool-file-btn {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transform: translateY(1px);
}

.sketch-tools [data-tool="image"] {
  margin-right: 38px;
}

.sketch-tools .tool-file-btn {
  margin-right: 38px;
}

.tool-file-btn input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.sketch-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 1;
}

.sketch-text-editor {
  position: absolute;
  z-index: 3;
  border: none;
  outline: none;
  resize: none;
  overflow: hidden;
  background: transparent;
  color: var(--text);
  font-family: var(--font-sketch);
  font-size: 24px;
  line-height: 1.3;
  padding: 0;
  margin: 0;
  pointer-events: none;
}

.sketch-text-editor::placeholder {
  color: var(--text);
  opacity: 0.45;
}

.sketch-text-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.sketch-text-item {
  position: absolute;
  z-index: 2;
  color: var(--text);
  font-family: var(--font-sketch);
  font-weight: 400;
  line-height: 1.3;
  white-space: pre-wrap;
  pointer-events: none;
  user-select: none;
  cursor: move;
}

.sketch-board[data-tool="text"] .sketch-text-item {
  pointer-events: auto;
}

.sketch-text-item-content {
  white-space: pre-wrap;
}

.sketch-text-item-handle {
  position: absolute;
  right: -11px;
  bottom: -11px;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  background: var(--bg);
  border: 1px solid rgba(0, 51, 160, 0.24);
  border-radius: 999px;
  box-shadow: 0 0 0 2px var(--bg);
  opacity: 0;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
}

.sketch-board[data-tool="text"] .sketch-text-item-handle {
  opacity: 1;
}

body.theme-alt .sketch-text-item-handle {
  border-color: rgba(255, 255, 255, 0.28);
}

.sketch-preview {
  position: absolute;
  inset: 0;
  z-index: 5;
}

.sketch-preview-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(6px);
}

body.theme-alt .sketch-preview-backdrop {
  background: rgba(0, 51, 160, 0.94);
}

body.theme-alt .sketch-preview-dialog {
  border-color: rgba(255, 255, 255, 0.28);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.18);
}

.sketch-preview-dialog {
  position: absolute;
  top: 40px;
  left: 40px;
  right: 40px;
  bottom: 40px;
  padding: 28px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  column-gap: 28px;
  background: var(--bg);
  color: var(--text);
  border: 1px solid rgba(0, 51, 160, 0.18);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.08);
}

.sketch-preview-media {
  grid-column: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  position: relative;
  align-self: center;
  padding: 0;
  width: 100%;
  max-width: 100%;
  aspect-ratio: var(--preview-aspect, 4 / 3);
}

.sketch-preview-image {
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  display: block;
  position: relative;
  z-index: 1;
  border: 1px solid rgba(0, 51, 160, 0.18);
}

body.theme-alt .sketch-preview-image {
  border-color: rgba(255, 255, 255, 0.28);
}

.sketch-preview-sidebar {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.sketch-preview-fields {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: var(--preview-media-height, 420px);
  padding-top: 58px;
}

.sketch-preview-field {
  display: flex;
  flex-direction: column;
  gap: 0;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  color: var(--text);
  position: relative;
}

.sketch-preview-field span {
  font-weight: 600;
  position: absolute;
  left: 0;
  top: -1.45rem;
}

.sketch-preview-field textarea,
.sketch-preview-field input {
  width: 100%;
  border: 1px solid rgba(0, 51, 160, 0.18);
  background: transparent;
  color: inherit;
  font: inherit;
  padding: 10px 12px;
  outline: none;
}

body.theme-alt .sketch-preview-field textarea,
body.theme-alt .sketch-preview-field input {
  border-color: rgba(255, 255, 255, 0.28);
}

.sketch-preview-field textarea {
  min-height: 170px;
  resize: none;
}

.sketch-preview-message {
  height: 396px;
  min-height: 396px;
  flex: 0 0 auto;
}

.sketch-preview-status {
  min-height: 1.4em;
  font-size: 0.95rem;
  color: var(--text);
  margin-top: 12px;
}

.sketch-preview-actions {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  margin-top: 10px;
}

.sketch-preview-submit,
.sketch-preview-close {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--text);
  cursor: pointer;
}

body.sketch-preview-open {
  overflow: hidden;
}

body.sketch-preview-open .sketch-tools,
 body.sketch-preview-open .clear-drawing {
  visibility: hidden;
}

@media (max-width: 900px) {
  .sketch-preview {
    position: fixed;
  }

  .sketch-tools-wrap {
    top: 0;
  }

  .sketch-tools-toggle {
    display: inline-flex;
    align-items: center;
    position: relative;
    z-index: 2;
    padding: 10px 0 14px;
  }

  .sketch-tools {
    display: none;
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    z-index: 3;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 0 18px;
    background: var(--bg);
    border-top: 1px solid rgba(0, 51, 160, 0.12);
    border-bottom: 1px solid rgba(0, 51, 160, 0.12);
    white-space: normal;
    overflow: visible;
  }

  .sketch-board.tools-open .sketch-tools {
    display: flex;
  }

  .sketch-tools .tool-btn,
  .sketch-tools .tool-group,
  .sketch-tools .tool-file-btn {
    margin-right: 0;
    transform: none;
  }

  .sketch-tools [data-tool="image"],
  .sketch-tools .tool-file-btn {
    margin-right: 0;
  }

  body.theme-alt .sketch-tools {
    border-top-color: rgba(255, 255, 255, 0.22);
    border-bottom-color: rgba(255, 255, 255, 0.22);
  }

  .sketch-preview-dialog {
    top: 82px;
    right: 12px;
    bottom: 12px;
    left: 12px;
    padding: 48px 16px calc(20px + env(safe-area-inset-bottom, 0px));
    display: block;
    gap: 18px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    max-height: calc(100dvh - 94px);
  }

  .sketch-preview-sidebar {
    margin-top: 10px;
  }

  .sketch-preview-media {
    min-height: 42px;
    max-width: min(40vw, 220px);
    margin: 0 auto;
  }

  .sketch-preview-fields {
    min-height: 0;
    gap: 14px;
  }

  .sketch-preview-field textarea {
    min-height: 104px;
  }

  .sketch-preview-message {
    height: 120px;
    min-height: 120px;
  }

  .sketch-preview-field span {
    position: static;
    margin-bottom: 8px;
  }

  .sketch-preview-actions {
    margin-top: 8px;
  }
}

/* Sketch Book page: no scrolling */
body.page-template-page-sketch-book,
body.page-template-page-sketch-book #main-container,
body.page-template-page-sketch-book #primary,
body.page-template-page-sketch-book #main {
  height: 100%;
  overflow: hidden;
}

body.page-template-page-sketch-book .left-col {
  height: 100vh;
  overflow: hidden;
}

/* Utility */
.visually-hidden {
  position:absolute !important;
  height:1px;width:1px;
  overflow:hidden;clip:rect(1px,1px,1px,1px);
}

/* --------- Header entfernen auf Desktop (wenn noch sichtbar) ---------- */
@media (min-width: 900px) {
  header.site-header, .site-header, #masthead, .ct-header, .ct-header-main {
    display: none !important;
  }
}

/* Mobile header background matches theme */
@media (max-width: 900px) {
  header.site-header,
  .site-header,
  #masthead,
  .ct-header,
  .ct-header-main,
  .ct-header [data-row],
  .ct-header .ct-container,
  .ct-header .ct-container-fluid,
  .ct-header .ct-header-inner {
    background: var(--bg) !important;
    background-color: var(--bg) !important;
  }
}

/* --------- Layout Container ---------- */
.two-col-wrap {
  display: block;
  width: 100%;
  box-sizing: border-box;
}

/* Left column (content) */
.left-col {
  box-sizing: border-box;
  padding: 56px;
  margin-right: var(--sidebar-width);
  background: var(--bg);
  /* dotted grid */
  background-image: radial-gradient(circle, rgba(0, 51, 160, 0.18) 1.2px, transparent 1.2px);
  background-size: 26px 26px;
  background-position: 0 0;
  position: relative;
  min-height: 100vh;
}

/* Drawing canvas overlay for left column */
.left-col .draw-canvas {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.left-col > * {
  position: relative;
  z-index: 1;
}

/* Right column fixed to the right */
.right-col {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: var(--sidebar-width);
  box-sizing: border-box;
  padding: var(--sidebar-pad-y) var(--sidebar-pad-x);
  border-left: 1px solid var(--border);
  background: var(--bg);
  overflow: hidden;
}

.right-col::after {
  content: "";
  position: fixed;
  top: calc(var(--sidebar-pad-y) + var(--sidebar-title-offset));
  right: 0;
  width: var(--sidebar-collapsed-width);
  color: var(--text);
  font-family: var(--font-serif);
  font-size: 1.5rem;
  line-height: 1.02;
  font-weight: 500;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 12;
  transform: translateY(4px);
}

@media (min-width: 901px) {
  .right-col {
    cursor: pointer;
  }
}

/* ensure content-area doesn't enforce parent theme widths */
.content-area, .site-main { width: 100%; max-width: 100%; padding: 0; }

/* --------- Sidebar Typografie (modern, editorial) ---------- */
.site-name {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  line-height: 1.02;
  font-weight: 500;
  color: var(--text);
  margin: var(--sidebar-title-offset) 0 0.5rem;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.site-name-link {
  position: relative;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  width: 100%;
  min-width: 100%;
  min-height: 1.15em;
}

.site-name-wordmark {
  display: block;
  white-space: nowrap;
  visibility: visible;
}

.sidebar-compact-brand {
  position: absolute;
  top: var(--sidebar-title-offset);
  left: 50%;
  z-index: 6;
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 0;
  width: 2.25ch;
  margin: 0;
  color: var(--text);
  font-family: var(--font-serif);
  font-size: 1.5rem;
  line-height: 1.02;
  font-weight: 500;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-50%) translateY(4px);
  white-space: nowrap;
}

.sidebar-compact-brand::before {
  content: "FK";
  display: block;
}

.sidebar-compact-letter {
  display: none;
}

.site-desc {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  margin: 0 0 1.6rem;
  color: var(--text);
  font-weight: 300;
  letter-spacing: 0.02em;
}

.site-name-link,
.site-name-link:visited,
.site-name-link:hover,
.site-name-link:active,
.site-name-link:focus,
.site-desc-link,
.site-desc-link:visited,
.site-desc-link:hover,
.site-desc-link:active,
.site-desc-link:focus {
  color: inherit;
  text-decoration: none;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}

.sidebar-fade-target {
  transition:
    opacity 260ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 260ms cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 260ms;
}

.site-id,
.projects-list,
.site-links,
.clear-drawing,
.sidebar-footer,
.site-desc {
}

body.sidebar-ready .left-col {
  transition: margin-right var(--sidebar-shrink-duration) cubic-bezier(0.22, 1, 0.36, 1);
}

body.sidebar-ready .right-col {
  transition:
    width var(--sidebar-shrink-duration) cubic-bezier(0.22, 1, 0.36, 1),
    padding var(--sidebar-shrink-duration) cubic-bezier(0.22, 1, 0.36, 1);
}

body.sidebar-ready .right-col::after {
  transition:
    opacity 160ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 240ms cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 160ms;
}

body.sidebar-ready .site-name-wordmark {
  transition:
    opacity var(--sidebar-fade-duration) cubic-bezier(0.22, 1, 0.36, 1),
    transform var(--sidebar-fade-duration) cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear var(--sidebar-fade-duration);
}

body.sidebar-ready .sidebar-compact-brand {
  transition:
    opacity 160ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 240ms cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 160ms;
}

body.sidebar-ready .site-id,
body.sidebar-ready .projects-list,
body.sidebar-ready .site-links,
body.sidebar-ready .clear-drawing,
body.sidebar-ready .sidebar-footer,
body.sidebar-ready .site-desc {
  transition:
    opacity var(--sidebar-fade-duration) cubic-bezier(0.22, 1, 0.36, 1),
    transform var(--sidebar-fade-duration) cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear var(--sidebar-fade-duration);
}

body.sidebar-collapsing-out .site-id,
body.sidebar-collapsing-out .projects-list,
body.sidebar-collapsing-out .site-links,
body.sidebar-collapsing-out .clear-drawing,
body.sidebar-collapsing-out .sidebar-footer,
body.sidebar-collapsing-out .site-desc,
body.sidebar-collapsing-shrink .site-id,
body.sidebar-collapsing-shrink .projects-list,
body.sidebar-collapsing-shrink .site-links,
body.sidebar-collapsing-shrink .clear-drawing,
body.sidebar-collapsing-shrink .sidebar-footer,
body.sidebar-collapsing-shrink .site-desc,
body.sidebar-collapsed .site-id,
body.sidebar-collapsed .projects-list,
body.sidebar-collapsed .site-links,
body.sidebar-collapsed .clear-drawing,
body.sidebar-collapsed .sidebar-footer,
body.sidebar-collapsed .site-desc,
body.sidebar-expanding .site-id,
body.sidebar-expanding .projects-list,
body.sidebar-expanding .site-links,
body.sidebar-expanding .clear-drawing,
body.sidebar-expanding .sidebar-footer,
body.sidebar-expanding .site-desc {
  opacity: 0;
  visibility: hidden;
  transform: translateX(12px);
  pointer-events: none;
}

body.sidebar-collapsing-shrink .right-col,
body.sidebar-collapsed .right-col {
  width: var(--sidebar-collapsed-width);
  padding: var(--sidebar-pad-y) var(--sidebar-collapsed-pad-x);
  cursor: pointer;
}

body.sidebar-collapsing-shrink .left-col,
body.sidebar-collapsed .left-col {
  margin-right: var(--sidebar-collapsed-width);
}

body.sidebar-collapsing-shrink .sidebar-compact-brand,
body.sidebar-collapsed .sidebar-compact-brand {
  opacity: 0;
  visibility: hidden;
}

body.sidebar-collapsing-shrink .right-col::after,
body.sidebar-collapsed .right-col::after {
  content: "FK";
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

body.sidebar-collapsed .theme-toggle,
body.sidebar-collapsing-shrink .theme-toggle {
  bottom: var(--sidebar-toggle-bottom);
  right: 22px;
  z-index: 12;
  transform: none;
}

body.sidebar-expanding .right-col {
  width: var(--sidebar-width);
  padding: var(--sidebar-pad-y) var(--sidebar-pad-x);
}

body.sidebar-expanding .left-col {
  margin-right: var(--sidebar-width);
}

body.sidebar-expanding .sidebar-compact-brand,
body.sidebar-expanding-in .sidebar-compact-brand {
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition-delay: 0s;
}

body.sidebar-expanding .right-col::after,
body.sidebar-expanding-in .right-col::after {
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition-delay: 0s;
}

@media (min-width: 901px) {
  html:not(.sidebar-prefer-open) body:not(.sidebar-open):not(.sidebar-expanding):not(.sidebar-expanding-in):not(.sidebar-collapsing-out):not(.sidebar-collapsing-shrink) .site-id,
  html:not(.sidebar-prefer-open) body:not(.sidebar-open):not(.sidebar-expanding):not(.sidebar-expanding-in):not(.sidebar-collapsing-out):not(.sidebar-collapsing-shrink) .projects-list,
  html:not(.sidebar-prefer-open) body:not(.sidebar-open):not(.sidebar-expanding):not(.sidebar-expanding-in):not(.sidebar-collapsing-out):not(.sidebar-collapsing-shrink) .site-links,
  html:not(.sidebar-prefer-open) body:not(.sidebar-open):not(.sidebar-expanding):not(.sidebar-expanding-in):not(.sidebar-collapsing-out):not(.sidebar-collapsing-shrink) .clear-drawing,
  html:not(.sidebar-prefer-open) body:not(.sidebar-open):not(.sidebar-expanding):not(.sidebar-expanding-in):not(.sidebar-collapsing-out):not(.sidebar-collapsing-shrink) .sidebar-footer,
  html:not(.sidebar-prefer-open) body:not(.sidebar-open):not(.sidebar-expanding):not(.sidebar-expanding-in):not(.sidebar-collapsing-out):not(.sidebar-collapsing-shrink) .site-desc {
    opacity: 0;
    visibility: hidden;
    transform: translateX(12px);
    pointer-events: none;
  }

  html:not(.sidebar-prefer-open) body:not(.sidebar-open):not(.sidebar-expanding):not(.sidebar-expanding-in):not(.sidebar-collapsing-out):not(.sidebar-collapsing-shrink) .right-col {
    width: var(--sidebar-collapsed-width);
    padding: var(--sidebar-pad-y) var(--sidebar-collapsed-pad-x);
    cursor: pointer;
  }

  html:not(.sidebar-prefer-open) body:not(.sidebar-open):not(.sidebar-expanding):not(.sidebar-expanding-in):not(.sidebar-collapsing-out):not(.sidebar-collapsing-shrink) .left-col {
    margin-right: var(--sidebar-collapsed-width);
  }

  html:not(.sidebar-prefer-open) body:not(.sidebar-open):not(.sidebar-expanding):not(.sidebar-expanding-in):not(.sidebar-collapsing-out):not(.sidebar-collapsing-shrink) .sidebar-compact-brand {
    opacity: 0;
    visibility: hidden;
  }

  html:not(.sidebar-prefer-open) body:not(.sidebar-open):not(.sidebar-expanding):not(.sidebar-expanding-in):not(.sidebar-collapsing-out):not(.sidebar-collapsing-shrink) .right-col::after {
    content: "FK";
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  html:not(.sidebar-prefer-open) body:not(.sidebar-open):not(.sidebar-expanding):not(.sidebar-expanding-in):not(.sidebar-collapsing-out):not(.sidebar-collapsing-shrink) .theme-toggle {
    bottom: var(--sidebar-toggle-bottom);
    right: 22px;
    z-index: 12;
    transform: none;
  }
}

body.sidebar-expanding-in .site-id,
body.sidebar-expanding-in .projects-list,
body.sidebar-expanding-in .site-links,
body.sidebar-expanding-in .clear-drawing,
body.sidebar-expanding-in .sidebar-footer,
body.sidebar-expanding-in .site-desc {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
  transition-delay: 0s;
}

body.sidebar-collapsing-out .site-name-wordmark,
body.sidebar-collapsing-shrink .site-name-wordmark,
body.sidebar-collapsed .site-name-wordmark,
body.sidebar-expanding .site-name-wordmark {
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
}

body.sidebar-expanding-in .site-name-wordmark {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.site-name-compact {
  opacity: 0;
  pointer-events: none;
}

/* Projects list (right) */
.projects-list ul, .site-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.projects-heading {
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
  margin: .65rem 0 0;
}
.projects-heading:hover { color: var(--text); }
.project-list-item {
  margin: .6rem 0;
}
.project-list-item a {
  color: var(--text);
  font-weight: 400;
  font-family: var(--font-sans);
  font-size: 1rem;
  padding-left: .4rem;
  border-left: 2px solid transparent;
  transition: color .18s ease, border-color .18s ease;
}
.project-list-item a:hover { color: var(--text); border-left-color: var(--text); }
.project-list-item.is-active a { font-weight: 700; }

/* site menu */
.site-links { margin-top: 1.4rem; margin-bottom: 1.2rem; }
.site-links li { margin: .65rem 0; }
.site-links a { color: var(--text); font-weight: 600; }
.site-links a:hover { color: var(--text); }
.contact-menu .contact-toggle {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  color: var(--text);
  font-weight: 600;
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
}
.contact-panel {
  margin-top: 0;
  margin-bottom: 0;
  display: block;
  max-height: 0;
  overflow: hidden;
  transition: max-height 200ms ease;
}
.contact-panel[hidden] { display: block; }
.contact-menu .contact-toggle[aria-expanded="true"] + .contact-panel {
  max-height: 200px;
  margin-top: 0;
}
.contact-line,
.contact-panel a.contact-line,
.contact-panel a.contact-line:visited,
.contact-panel a.contact-line:active,
.contact-panel a.contact-line:focus {
  display: block;
  font-weight: 400;
  color: var(--text);
  text-decoration: none;
  font-family: var(--font-sans);
  font-size: 1rem;
  padding-left: .4rem;
  border-left: 2px solid transparent;
}
.contact-line { margin-top: .6rem; }
.contact-line:last-child { margin-bottom: .6rem; }

/* Info portraits: swap by theme */
body.page-template-page-info .project-description img { display: none; }
body.page-template-page-info .info-portrait { display: none; }
body.page-template-page-info:not(.theme-alt) .info-portrait--default { display: block; }
body.page-template-page-info.theme-alt .info-portrait--alt { display: block; }
body.page-template-page-info .project-description::after {
  content: "";
  display: block;
  clear: both;
}
body.page-template-page-info .left-col {
  --info-heading-top: 520px;
  --info-portrait-gap: 48px;
}
body.page-template-page-info .project-description .info-portrait {
  position: absolute;
  top: 0;
  left: 50%;
  width: 74%;
  max-width: 760px;
  height: auto;
  margin: 0;
  transform: translateX(-50%);
}
body.page-template-page-info .project-description .info-portrait img {
  width: 100%;
  height: auto;
  display: block;
}
body.page-template-page-info .project-description {
  position: relative;
  margin-top: 0;
  padding-top: calc(var(--info-heading-top) + var(--info-portrait-gap));
}
body.page-template-page-info .project-description > :not(.info-portrait) {
  width: 74%;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}
body.page-template-page-info .project-description > *:first-child {
  margin-top: 0;
}
body.page-template-page-info .project-description > h1:first-child,
body.page-template-page-info .project-description > h2:first-child,
body.page-template-page-info .project-description > h3:first-child {
  margin-top: 0;
}
body.page-template-page-info .project-description p {
  max-width: none;
  hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
}

/* sidebar footer */
.sidebar-footer {
  position: absolute;
  left: 12px;
  bottom: 0px;
  margin: 0;
  padding: 0;
  color: rgba(0, 51, 160, 0.42);
  font-size: 0.78rem;
  line-height: 1.35;
  letter-spacing: 0.01em;
}

body.theme-alt .sidebar-footer {
  color: rgba(255, 255, 255, 0.42);
}

/* Yin-Yang theme toggle */
.sidebar-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding-bottom: 88px;
}
.theme-toggle {
  position: fixed;
  right: 22px;
  bottom: var(--sidebar-toggle-bottom);
  width: 24px;
  height: 24px;
  border: none;
  padding: 0;
  border-radius: 50%;
  background: var(--bg);
  cursor: pointer;
  z-index: 8;
  transition: opacity 160ms cubic-bezier(0.22, 1, 0.36, 1);
}

.clear-drawing {
  position: absolute;
  left: 12px;
  bottom: 32px;
  border: none;
  background: transparent;
  color: var(--text);
  padding: 0;
  border-radius: 0;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 300;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
}
.theme-toggle svg { display: block; width: 100%; height: 100%; }
.theme-toggle .yin-dark { fill: var(--text); }
.theme-toggle .yin-light { fill: var(--bg); }
.theme-toggle:focus-visible { outline: 3px solid rgba(0,0,0,0.2); outline-offset: 3px; }
body.theme-alt .theme-toggle:focus-visible { outline-color: rgba(255,255,255,0.5); }

/* --------- Masonry Left Column (images) ---------- */
/* create masonry with CSS columns */
.masonry {
  column-count: 3;
  column-gap: var(--gap);
}

/* each item */
.masonry-item {
  display: inline-block;
  width: 100%;
  margin: 0 0 var(--gap);
  break-inside: avoid;
  position: relative; /* for caption overlay */
}

/* --------- Homepage intro animation ---------- */
body.frontpage-intro-pending .right-col {
  opacity: 0;
  transform: translate3d(28px, 0, 0);
}

body.frontpage-intro-pending .masonry-item {
  opacity: 0;
  transform: translate3d(0, 34px, 0);
}

body.frontpage-intro-pending .masonry-item:nth-child(2n) {
  transform: translate3d(0, 42px, 0);
}

body.frontpage-intro-pending .masonry-item:nth-child(3n) {
  transform: translate3d(0, 28px, 0);
}

body.frontpage-intro-enabled .right-col,
body.frontpage-intro-enabled .masonry-item {
  will-change: transform, opacity;
  transition-property: transform, opacity;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

body.frontpage-intro-enabled .right-col {
  transition-duration: 780ms;
}

body.frontpage-intro-enabled .masonry-item {
  transition-duration: 860ms;
}

body.frontpage-intro-enabled.frontpage-intro-ready .right-col,
body.frontpage-intro-enabled.frontpage-intro-ready .masonry-item {
  opacity: 1;
  transform: none;
}

body.frontpage-intro-enabled .masonry-item:nth-child(1) { transition-delay: 40ms; }
body.frontpage-intro-enabled .masonry-item:nth-child(2) { transition-delay: 90ms; }
body.frontpage-intro-enabled .masonry-item:nth-child(3) { transition-delay: 140ms; }
body.frontpage-intro-enabled .masonry-item:nth-child(4) { transition-delay: 190ms; }
body.frontpage-intro-enabled .masonry-item:nth-child(5) { transition-delay: 240ms; }
body.frontpage-intro-enabled .masonry-item:nth-child(6) { transition-delay: 290ms; }
body.frontpage-intro-enabled .masonry-item:nth-child(7) { transition-delay: 340ms; }
body.frontpage-intro-enabled .masonry-item:nth-child(8) { transition-delay: 390ms; }

@media (prefers-reduced-motion: reduce) {
  body.frontpage-intro-pending .right-col,
  body.frontpage-intro-pending .masonry-item,
  body.frontpage-intro-enabled .right-col,
  body.frontpage-intro-enabled .masonry-item {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* links are block-level so overlay positioning works */
.masonry-link {
  display: block;
  position: relative;
  color: inherit;
  cursor: pointer;
}

.masonry-lightbox-trigger {
  display: block;
  position: relative;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.masonry-lightbox-trigger * {
  cursor: pointer;
}

/* images: remove black border, modern spacing */
.masonry-img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  border: none;            /* <-- entferne Rahmen */
  box-shadow: none;
  transition: opacity .22s ease;
}
.masonry-video {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  border: none;
  box-shadow: none;
  transition: opacity .22s ease;
}

.masonry-img.is-pending,
.masonry-video.is-pending {
  opacity: 0;
}

.masonry-img.is-loaded,
.masonry-video.is-loaded {
  opacity: 1;
}

/* placeholder style (no image) */
.masonry-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f7f7f7;
  color: var(--muted);
  padding: 36% 0;
  border-radius: 4px;
}

/* hover: subtle lift + stronger shadow */
/* --------- Titel-Overlay (links unten) ---------- */
.masonry-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 46px;
  background: var(--bg);
  color: var(--text);
  padding: 10px 14px;
  border-radius: 0;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 1rem;
  letter-spacing: 0.01em;
  box-shadow: none;
  max-width: 100%;
  text-align: left;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  box-sizing: border-box;
  opacity: 0;
  transform: translateY(100%);
  transition: opacity 160ms ease, transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
  z-index: 2;
}

.masonry-title {
  display: block;
  width: 100%;
  color: inherit;
  font: inherit;
  font-weight: inherit;
}

.masonry-link,
.masonry-block,
.masonry-lightbox-trigger {
  overflow: hidden;
}

.masonry-link:hover .masonry-caption,
.masonry-link:focus .masonry-caption,
.masonry-link:focus-visible .masonry-caption,
.masonry-lightbox-trigger:hover .masonry-caption,
.masonry-lightbox-trigger:focus .masonry-caption,
.masonry-lightbox-trigger:focus-visible .masonry-caption,
.masonry-block:hover .masonry-caption,
.masonry-item.is-hovering .masonry-caption {
  opacity: 1;
  transform: translateY(0);
}

/* --------- Project Slider ---------- */
.project-slider {
  position: relative;
  width: 100%;
  max-width: 60%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 28px;
}

.project-slides {
  position: relative;
  width: 100%;
  background-color: var(--bg);
  background-image: radial-gradient(circle, rgba(0, 51, 160, 0.18) 1.2px, transparent 1.2px);
  background-size: 26px 26px;
  background-position: 0 0;
  min-height: 420px;
  overflow: hidden;
  touch-action: pan-y;
}

.project-slide {
  display: none;
  width: 100%;
  height: 100%;
  min-height: 420px;
  align-items: center;
  justify-content: center;
  position: relative;
}

.project-slide.is-active {
  display: flex;
}

.project-slide.is-dragging {
  transition: none !important;
}

.project-slide.is-swipe-preview {
  display: flex;
}

.project-slide-img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
}

.project-slide-caption,
.project-description figure figcaption,
.project-description .wp-caption-text {
  position: absolute;
  left: 50%;
  bottom: 0;
  padding: 12px 14px;
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 0.80rem;
  font-weight: 400;
  line-height: 1.3;
  text-align: center;
  background: transparent;
  max-width: 100%;
  z-index: 2;
  transform: translateX(-50%);
  box-sizing: border-box;
}

.project-description figure,
.project-description .wp-block-image,
.project-description .wp-caption {
  position: relative;
  display: inline-block;
}

.project-description figure figcaption,
.project-description .wp-caption-text {
  margin: 0;
}

.slider-btn {
  position: static;
  transform: none;
  border: none;
  background: transparent;
  color: var(--text);
  width: auto;
  height: auto;
  padding: 0;
  border-radius: 0;
  font-family: var(--font-sans);
  font-size: 2.25rem;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.slider-controls {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
}

.slider-counter {
  text-align: center;
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 400;
  font-style: normal;
  line-height: 1.35;
  letter-spacing: 0;
  color: var(--text);
}

.slider-prev {
  justify-self: start;
}

.slider-next {
  justify-self: end;
}

.project-lightbox {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  background: rgba(255, 255, 255, 0.94);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
  z-index: 9998;
}

body.theme-alt .project-lightbox {
  background: rgba(0, 51, 160, 0.94);
}

.project-lightbox.is-open {
  opacity: 1;
  pointer-events: auto;
}

body.project-lightbox-open {
  overflow: hidden;
}

.project-lightbox img {
  display: block;
  max-width: min(92vw, 1600px);
  max-height: 90vh;
  width: auto;
  height: auto;
  box-shadow: none;
  touch-action: pan-y;
  user-select: none;
}

.project-lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  font-size: clamp(2rem, 3vw, 3rem);
  line-height: 1;
}

.project-lightbox-prev {
  left: 20px;
}

.project-lightbox-next {
  right: 20px;
}

.project-lightbox.is-single .project-lightbox-nav {
  display: none;
}

.project-lightbox-counter {
  position: absolute;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  z-index: 2;
  color: var(--text);
  text-align: center;
}

.project-lightbox.is-single .project-lightbox-counter {
  display: none;
}

.project-lightbox video {
  display: block;
  max-width: min(92vw, 1600px);
  max-height: 90vh;
  width: auto;
  height: auto;
  box-shadow: none;
  background: transparent;
}

.project-description {
  margin-top: 16px;
  max-width: 60%;
  margin-left: auto;
  margin-right: auto;
  text-align: justify;
  text-align-last: left;
}

.left-col {
  --project-description-top: 660px;
}
.project-description h1,
.project-description h2,
.project-description h3 {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  line-height: 1.02;
  font-weight: 500;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin: 0 0 0.5rem;
}

@media (max-width: 900px) {
  .masonry-link:hover .masonry-img,
  .masonry-link:focus .masonry-img,
  .masonry-link:active .masonry-img {
    filter: none;
  }

  .masonry-item.is-hovering,
  .masonry-item.is-hovering .masonry-link {
    cursor: auto;
  }

  .masonry-item.is-hovering .masonry-caption {
    opacity: 1;
    transform: none;
  }

  .masonry-caption {
    position: static;
    display: block;
    min-height: 0;
    background: none;
    padding: 10px 0 0;
    text-align: center;
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }

  .masonry-link,
  .masonry-block,
  .masonry-lightbox-trigger {
    overflow: visible;
  }
}



.masonry-item.is-hovering,
.masonry-item.is-hovering .masonry-link {
  cursor: auto;
}

.masonry-item[data-hover="1"],
.masonry-item[data-hover="1"] .masonry-link,
.masonry-item[data-hover="1"] .masonry-img,
.masonry-item[data-hover="1"] .masonry-caption {
  cursor: pointer;
}

.masonry-item.is-hovering .masonry-caption {
  opacity: 1;
  transform: translateY(0);
}

/* if you want the background to be softer, reduce alpha: rgba(...,0.6) */

/* hide any default caption below images (safety) */
.masonry-item figcaption,
.masonry-item .wp-caption,
.masonry-item .caption {
  display: none !important;
}

/* --------- Responsive adjustments ---------- */
@media (max-width: 1460px) {
  :root { --gap: clamp(34px, 4.6vw, 68px); }
  .masonry { column-count: 2; column-gap: var(--gap); }
  .site-name { font-size: 1.5rem; }
  .left-col { padding: 40px; margin-right: var(--sidebar-width); }
  .right-col { padding: 32px; }
}

@media (max-width: 900px) {
  :root { --gap: 50px; }
  /* stacked on mobile */
  .left-col { margin-right: 0; padding: 20px; padding-top: calc(20px + 64px); }
  .right-col {
    position: static;
    width: 100%;
    height: auto;
    border-left: none;
    border-top: none;
    padding: 20px;
  }
  .masonry { column-count: 1; column-gap: 16px; }
  .site-name { font-size: 1.5rem; }

  /* Mobile header title */
.site-title::before,
.site-title a::before {
    content: "DI ";
  }

  /* Hide header title on mobile */
  .site-title,
  .site-title a,
  .ct-header .site-title,
  .ct-header .site-title a {
    display: none !important;
  }

  header.site-header,
  .site-header,
  #masthead,
  .ct-header,
  .ct-header-main {
    display: none !important;
  }
}

@media (max-width: 900px) {
  .project-slider,
  .project-description,
  body.page-template-page-info .project-description .info-portrait,
  body.page-template-page-info .project-description > :not(.info-portrait) {
    max-width: 100%;
  }
  .project-slides,
  .project-slide {
    min-height: 0;
  }
  .project-slide.is-dragging,
  .project-slide.is-swipe-preview {
    position: absolute;
    inset: 0;
    z-index: 2;
  }
  .project-slide.is-active:not(.is-dragging) {
    position: relative;
    z-index: 1;
  }
  body.page-template-page-info .project-description {
    padding-top: 0;
  }
  body.page-template-page-info .project-description .info-portrait {
    position: static;
    left: auto;
    top: auto;
    transform: none;
    width: 100%;
    margin: 0 0 24px 0;
  }
  body.page-template-page-info .project-description .info-portrait img {
    width: 100%;
    display: block;
  }
  body.page-template-page-info .project-description figure.info-portrait,
  body.page-template-page-info .project-description .wp-block-image.info-portrait,
  body.page-template-page-info .project-description .wp-caption.info-portrait {
    position: relative;
    display: block;
    width: 100%;
    max-width: none;
  }
  body.page-template-page-info .project-description figure figcaption,
  body.page-template-page-info .project-description .wp-caption-text,
  body.page-template-page-info .project-description .wp-block-image figcaption {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    text-align: center !important;
    box-sizing: border-box !important;
    display: block !important;
    margin: 0 auto !important;
  }
  body.page-template-page-info .project-description > :not(.info-portrait) {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
  .left-col {
    --project-description-top: auto;
  }
  body.page-template-page-info .left-col {
    --info-heading-top: auto;
  }
}

/* Mobile header + menu */
.mobile-header { display: none; }
.mobile-menu { display: none; }
@media (max-width: 900px) {
  .mobile-header {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 64px;
    align-items: center;
    padding: 0 20px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    z-index: 1002;
  }
  .mobile-menu-toggle {
    appearance: none;
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    font-family: var(--font-serif);
    font-size: 1.5rem;
    line-height: 1.02;
    font-weight: 500;
    color: var(--text);
    letter-spacing: -0.02em;
    text-transform: uppercase;
    cursor: pointer;
  }
  .mobile-menu {
    display: block;
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg);
    z-index: 1001;
    overflow: hidden;
    padding-top: 0;
    transform: translateY(-100%);
    transition: transform 220ms ease;
  }
  body.menu-open .mobile-menu {
    transform: translateY(0);
  }
  body.menu-open { overflow: hidden; }
  .mobile-menu .right-col {
    position: relative;
    width: 100%;
    height: 100%;
    border: none;
    padding: 20px;
    background: transparent;
    box-sizing: border-box;
    overflow: hidden;
  }
  .mobile-menu .sidebar-inner {
    min-height: 100%;
    height: 100%;
    padding-bottom: 96px;
    box-sizing: border-box;
    overflow: hidden;
  }
  .mobile-menu .site-name { display: none; }
  .mobile-menu .site-desc { margin-top: 0; }
  .mobile-menu .site-desc-link,
  .mobile-menu .site-desc-link:visited,
  .mobile-menu .site-desc-link:hover,
  .mobile-menu .site-desc-link:active,
  .mobile-menu .site-desc-link:focus {
    font-family: var(--font-sans);
    font-size: 0.95rem;
    font-weight: 300;
    letter-spacing: 0.02em;
    color: var(--text);
    text-decoration: none;
  }
  .mobile-menu .site-links li { text-align: left; }
  .mobile-menu .contact-menu .contact-toggle {
    text-align: left;
    width: 100%;
    font-weight: 600;
    display: block;
  }
  .mobile-menu .projects-heading { font-weight: 600; display: block; }
  .mobile-menu .site-links { text-align: left; }
  .mobile-menu .site-links a { font-weight: 600; display: block; text-align: left; }
  .mobile-menu .projects-heading,
  .mobile-menu .site-links a,
  .mobile-menu .contact-menu .contact-toggle {
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0;
  }
  .mobile-menu .contact-line,
  .mobile-menu .contact-panel a.contact-line,
  .mobile-menu .contact-panel a.contact-line:visited,
  .mobile-menu .contact-panel a.contact-line:active,
  .mobile-menu .contact-panel a.contact-line:focus {
    font-weight: 400;
  }
  .mobile-menu .clear-drawing {
    display: none;
  }
  .mobile-menu .theme-toggle {
    position: absolute;
    right: 12px;
    bottom: 54px;
  }
}

@media (max-width: 900px) {
  body.compact-mobile-menu .mobile-menu .right-col {
    padding: 16px 18px;
  }

  body.compact-mobile-menu .mobile-menu .sidebar-inner {
    min-height: 100%;
    height: 100%;
    padding-bottom: 82px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  body.compact-mobile-menu .mobile-menu .site-desc {
    margin-bottom: 0.75rem;
  }

  body.compact-mobile-menu .mobile-menu .projects-list {
    margin-bottom: 1rem;
  }

  body.compact-mobile-menu .mobile-menu .projects-heading {
    position: relative;
    padding-right: 18px;
    margin: 0;
  }

  body.compact-mobile-menu .mobile-menu .projects-heading::after {
    content: '+';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-weight: 300;
    line-height: 1;
  }

  body.compact-mobile-menu .mobile-menu .projects-list.is-open .projects-heading::after {
    content: '−';
  }

  body.compact-mobile-menu .mobile-menu .projects-list ul {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    margin-top: 0;
    transition: max-height 180ms ease, opacity 140ms ease, margin-top 140ms ease;
  }

  body.compact-mobile-menu .mobile-menu .projects-list.is-open ul {
    max-height: 70vh;
    opacity: 1;
    margin-top: 0.35rem;
  }

  body.compact-mobile-menu .mobile-menu .projects-list li,
  body.compact-mobile-menu .mobile-menu .site-links li {
    margin: 0.42rem 0;
  }

  body.compact-mobile-menu .mobile-menu .site-links {
    margin-top: 0.9rem;
    margin-bottom: 0.85rem;
  }

  body.compact-mobile-menu .mobile-menu .theme-toggle {
    bottom: 44px;
  }

  body.compact-mobile-menu .mobile-menu .sidebar-footer {
    font-size: 0.82rem;
    line-height: 1.2;
  }
}
/* Right column inside offcanvas (mobile hamburger menu) */
#offcanvas .right-col,
.right-col.right-col-in-offcanvas {
  position: static;
  width: 100%;
  height: auto;
  min-width: 0;
  max-width: none;
  border-left: none;
  padding: 16px 20px;
  background: transparent;
  box-sizing: border-box;
}

#offcanvas .sidebar-inner,
.right-col.right-col-in-offcanvas .sidebar-inner {
  padding-bottom: 0;
}

/* Normalize offcanvas inner spacing so left/right margins are truly symmetric */
#offcanvas .ct-panel-content[data-device="mobile"] .ct-panel-content-inner {
  padding-left: 0 !important;
  padding-right: 0 !important;
  scrollbar-gutter: stable both-edges;
}

@media (max-width: 480px) {
  :root { --gap: 30px; }
  .masonry { column-count: 1; column-gap: 0; }
  .site-name { font-size: 1.5rem; }
  .masonry-caption { font-size: 1rem; padding: 8px 0 0; }
}

/* Accessibility focus */
a:focus { outline: none; }

/* Hide Blocksy footer copyright row */
.ct-footer-copyright,
[data-column="copyright"] {
  display: none !important;
}

/* Match footer background to columns */
footer,
.ct-footer,
#main-container > footer.ct-footer,
.ct-footer {
  display: none !important;
  height: 0 !important;
}