@import url('https://fonts.googleapis.com/css2?family=League+Spartan:wght@100..900&display=swap');

:root {
    --page-gutter: clamp(20px, 5vw, 72px);
    --content-max-width: 1280px;
    --hero-max-width: 980px;
    --nav-height-offset: 150px;
    --section-space: clamp(96px, 14vw, 220px);
    --color-bg: #ffffff;
    --color-surface: #ffffff;
    --color-surface-muted: #f5f5f5;
    --color-surface-soft: #e9e9e9;
    --color-text: #000000;
    --color-text-muted: #3b3b3b;
    --color-text-soft: #7a7a7a;
    --color-border: #000000;
    --color-accent: #ffff00;
    --color-danger-bg: #fff2f2;
    --color-focus-bg: #fffde8;
    --color-code-bg: #fff7b8;
    --color-shadow: #000000;
    --color-footer-signature: #efefef;
    --color-overlay: rgba(0, 0, 0, 0.16);
    --color-nav-fade: rgba(255, 255, 255, 0.95);
    --color-nav-transparent: rgba(255, 255, 255, 0);
    --color-footer-link: rgba(0, 0, 0, 0.72);
    --color-accent-text: #111111;
}

html {
    scroll-behavior: smooth;
}

html[data-theme="dark"] {
    color-scheme: dark;
    --color-bg: #0f1115;
    --color-surface: #171a21;
    --color-surface-muted: #20242d;
    --color-surface-soft: #2b3140;
    --color-text: #f5f7ff;
    --color-text-muted: #dbe2f0;
    --color-text-soft: #aeb8cb;
    --color-border: #c6d0e3;
    --color-accent: #ffd84d;
    --color-danger-bg: #5a262f;
    --color-focus-bg: #2d2611;
    --color-code-bg: #45380c;
    --color-shadow: #000000;
    --color-footer-signature: #1a1d25;
    --color-overlay: rgba(0, 0, 0, 0.45);
    --color-nav-fade: rgba(15, 17, 21, 0.95);
    --color-nav-transparent: rgba(15, 17, 21, 0);
    --color-footer-link: #dbe2f0;
    --color-accent-text: #111317;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 20px var(--page-gutter) 20px;
    padding-top: var(--nav-height-offset);
    font-family: 'League Spartan', sans-serif;
    background: var(--color-bg);
    color: var(--color-text);
    overflow-x: hidden;
    transition: background-color 0.25s ease, color 0.25s ease;
}

a {
    color: inherit;
}

.navBar {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 100;
    margin-bottom: 0;
    padding: 16px 0 44px;
    background: linear-gradient(to bottom, var(--color-bg) 0%, var(--color-bg) 62%, var(--color-nav-transparent) 100%);
    isolation: isolate;
}

.navBar::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 48px;
    background: linear-gradient(to bottom, var(--color-nav-fade) 0%, var(--color-nav-transparent) 100%);
    z-index: 0;
    pointer-events: none;
}

.navBar-container {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    width: 100%;
    max-width: var(--content-max-width);
    margin: 0 auto;
}

.navBar-left,
.navBar-right {
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.themeToggle,
.navBar-overlayTheme {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border: 2px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
    font-size: 0.95rem;
    font-weight: 700;
    box-shadow: 5px 5px 0 var(--color-shadow);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.themeToggle:hover,
.navBar-overlayTheme:hover {
    transform: translate(-1px, -1px);
    box-shadow: 7px 7px 0 var(--color-shadow);
}

.themeToggle-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.2rem;
}

.navBar-overlayTheme {
    justify-content: center;
    width: 100%;
    padding: 18px 20px;
    background: var(--color-surface);
    box-shadow: 8px 8px 0 var(--color-shadow);
}

.navBar-left {
    order: 1;
}

.navBar-right {
    order: 2;
    justify-content: flex-end;
    flex: 1 1 680px;
}

.navBar-burger,
.navBar-overlay {
    display: none;
}

.navBar-title {
    font-family: 'League Spartan', sans-serif;
    font-size: clamp(1.6rem, 2.1vw, 2.4rem);
    font-weight: 800;
}

.navBar-title a {
    color: #000;
    text-decoration: none;
}

.navBar-button-primary a,
.navBar-button-tertiary a,
.navBar-button-secondary a,
.button {
    display: inline-block;
    width: auto;
    max-width: 100%;
    min-width: min(100%, 180px);
    padding: 18px 24px;
    border: 3px solid #000;
    background: #FFFF00;
    color: #000;
    text-align: center;
    text-decoration: none;
    font-size: clamp(1rem, 1.1vw, 1.15rem);
    font-weight: 700;
    box-shadow: 7px 7px 0 #000;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.navBar-button-primary a:hover,
.navBar-button-tertiary a:hover,
.navBar-button-secondary a:hover,
.button:hover {
    transform: translate(-1px, -1px);
    box-shadow: 9px 9px 0 #000;
}

.heroSection {
    min-height: calc(100vh - 160px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.heroSection,
.projetSection,
.socialSection,
.contactSection {
    scroll-margin-top: calc(var(--nav-height-offset) + 12px);
}

.heroContraint {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    max-width: var(--hero-max-width);
    margin: 0 auto;
    text-align: center;
}

.pretitle,
.title,
.subtitle {
    margin: 0;
}

.pretitle {
    color: #000;
    font-size: clamp(2rem, 6vw, 4.8rem);
    font-weight: 300;
    line-height: 0.98;
}

.title {
    color: #000;
    font-size: clamp(2.6rem, 7.5vw, 5.8rem);
    font-weight: 900;
    line-height: 0.94;
    text-transform: uppercase;
}

.subtitle {
    color: #7a7a7a;
    max-width: 18ch;
    font-size: clamp(1rem, 1.8vw, 1.45rem);
    font-weight: 500;
    line-height: 1.15;
}

.buttonContainer {
    margin-top: 24px;
    display: flex;
    justify-content: center;
}

.Projet-navBar-container {
    width: 100%;
    max-width: var(--content-max-width);
    margin: 0 auto;
}

.projetSection {
    padding: var(--section-space) 0 0;
}

.projectSection-head {
    margin-bottom: 24px;
}

.projectSection-kicker,
.projectSection-title {
    margin: 0;
}

.projectSection-kicker {
    color: #7a7a7a;
    font-size: 0.95rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.projectSection-title {
    margin-top: 8px;
    color: #000;
    font-size: clamp(2rem, 4vw, 3.4rem);
    font-weight: 800;
}

.projectFiltersMenu {
    position: relative;
    width: min(100%, 360px);
    margin-bottom: 28px;
    display: none;
}

.projectFiltersMenu[open] {
    z-index: 5;
}

.projectFiltersToggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    padding: 16px 18px;
    border: 3px solid #000;
    background: #ffff00;
    box-shadow: 7px 7px 0 #000;
    cursor: pointer;
    list-style: none;
}

.projectFiltersToggle::-webkit-details-marker {
    display: none;
}

.projectFiltersToggle-icon {
    display: inline-flex;
    flex-direction: column;
    gap: 4px;
    flex-shrink: 0;
}

.projectFiltersToggle-icon span {
    display: block;
    width: 24px;
    height: 3px;
    background: #000;
}

.projectFiltersToggle-copy {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.projectFiltersToggle-label,
.projectFiltersToggle-value {
    display: block;
}

.projectFiltersToggle-label {
    color: #000;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.projectFiltersToggle-value {
    color: #000;
    font-size: 1.05rem;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.projectFilters {
    position: absolute;
    top: calc(100% + 14px);
    left: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: min(100%, 360px);
    padding: 16px;
    border: 3px solid #000;
    background: #fff;
    box-shadow: 9px 9px 0 #000;
}

.projectFilters-desktop {
    position: static;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    width: auto;
    margin-bottom: 28px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.projectFilter {
    display: inline-block;
    padding: 14px 18px;
    border: 2px solid #000;
    background: #fff;
    color: #000;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1;
    transition: border-width 0.15s ease, font-weight 0.15s ease, transform 0.15s ease;
}

.projectFilter:hover {
    transform: translateY(-1px);
}

.projectFilter.is-active {
    border-width: 3px;
    font-weight: 700;
    background: #ffff00;
}

.projectGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    gap: 24px;
}

.projectCard {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    border: 2px solid #000;
    background: #fff;
}

.projectCard-image {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-bottom: 2px solid #000;
}

.projectCard-imagePlaceholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f5f5f5 0%, #e9e9e9 100%);
    color: #4a4a4a;
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.projectCard-content {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 14px;
    padding: 20px;
}

.projectCard-title,
.projectCard-description {
    margin: 0;
}

.projectCard-title {
    color: #000;
    font-size: 1.45rem;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.projectCard-description {
    color: #3b3b3b;
    font-size: 1rem;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.projectCard-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: auto;
}

.projectCard-link {
    display: inline-block;
    margin-top: 18px;
    color: #000;
    font-size: 1rem;
    font-weight: 800;
    text-decoration: none;
}

.projectCard-link:hover {
    text-decoration: underline;
}

.projectCard-tag {
    display: inline-flex;
    align-items: center;
    padding: 8px 10px;
    border: 1px solid #000;
    background: #fff;
    color: #000;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1;
}

.projectEmpty {
    margin: 0;
    padding: 24px;
    border: 2px solid #000;
    color: #000;
    font-size: 1rem;
    font-weight: 500;
}

.socialSection {
    padding: var(--section-space) 0 0;
}

.socialGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
}

.socialCard {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 20px;
    border: 3px solid #000;
    background: #fff;
    color: #000;
    text-decoration: none;
    box-shadow: 7px 7px 0 #000;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
    min-width: 0;
}

.socialCard:hover {
    background: #ffff00;
    transform: translate(-1px, -1px);
    box-shadow: 9px 9px 0 #000;
}

.socialCard-iconWrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    border: 2px solid #000;
    background: #ffff00;
}

.socialCard-icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
    filter: grayscale(1) brightness(0);
}

.socialCard-fallback {
    color: #000;
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 0.06em;
}

.socialCard-name {
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.1;
    overflow-wrap: anywhere;
}

.contactSection {
    padding: var(--section-space) 0 0;
}

.contactPanel {
    display: grid;
    grid-template-columns: minmax(260px, 0.9fr) minmax(320px, 1.1fr);
    gap: 32px;
    align-items: start;
    padding: 28px;
    border: 3px solid #000;
    background: #fff;
    box-shadow: 9px 9px 0 #000;
}

.contactIntro {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.contactText {
    margin: 0;
    max-width: 28ch;
    color: #3b3b3b;
    font-size: 1.05rem;
    line-height: 1.5;
}

.contactForm {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.contactFeedback {
    margin: 0;
    padding: 14px 16px;
    border: 2px solid #000;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.35;
}

.contactFeedback-success {
    background: #ffff00;
    color: #000;
}

.contactFeedback-error {
    background: #fff2f2;
    color: #000;
}

.contactTrap {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.contactField {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.contactLabel {
    color: #000;
    font-size: 1rem;
    font-weight: 700;
}

.contactInput,
.contactTextarea {
    width: 100%;
    padding: 16px 18px;
    border: 2px solid #000;
    background: #fff;
    color: #000;
    font-family: 'League Spartan', sans-serif;
    font-size: 1rem;
    line-height: 1.3;
    outline: none;
    transition: border-width 0.15s ease, background-color 0.15s ease;
}

.contactInput::placeholder,
.contactTextarea::placeholder {
    color: #7a7a7a;
}

.contactInput:focus,
.contactTextarea:focus {
    border-width: 3px;
    background: #fffde8;
}

.contactTextarea {
    resize: vertical;
    min-height: 160px;
}

.contactSubmit {
    align-self: flex-start;
}

.button-secondaryInline {
    background: #fff;
}

.projectDetailPage,
.adminPage {
    min-height: 100vh;
}

.adminPage {
    padding-top: 24px;
}

.projectDetail,
.adminLayout {
    width: 100%;
    max-width: var(--content-max-width);
    margin: 0 auto;
}

.projectDetail,
.adminLayout {
    padding-bottom: 80px;
}

.projectDetail-shell {
    width: min(1200px, 100%);
    margin: 0 auto;
}

.projectDetail-hero,
.projectDetail-body {
    scroll-margin-top: calc(var(--nav-height-offset) + 12px);
}

.projectDetail-hero {
    padding: 0 0 36px;
}

.projectDetail-banner {
    padding: 0 0 28px;
}

.projectDetail-heroEditorial {
    padding-bottom: 28px;
}

.projectDetail-tags,
.projectDetail-actions,
.adminHeader-actions,
.adminListActions,
.adminCheckboxGrid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.projectDetail-tags {
    margin-top: 22px;
}

.projectDetail-actions {
    margin-top: 28px;
}

.projectDetail-cover {
    border: 3px solid #000;
    background: #fff;
    box-shadow: 9px 9px 0 #000;
    overflow: hidden;
}

.projectDetail-coverWide {
    width: 100%;
}

.projectDetail-image {
    display: block;
    width: 100%;
    max-height: min(62vh, 760px);
    object-fit: cover;
}

.projectDetail-title {
    margin: 0;
    max-width: 11ch;
    color: #000;
    font-size: clamp(3rem, 7vw, 6.5rem);
    font-weight: 900;
    line-height: 0.96;
    letter-spacing: -0.04em;
}

.projectDetail-lead {
    margin: 18px 0 0;
    max-width: 44rem;
    color: #3b3b3b;
    font-size: clamp(1.1rem, 1.8vw, 1.45rem);
    line-height: 1.5;
}

.projectDetail-meta {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 28px;
    margin-top: 28px;
}

.projectDetail-story {
    padding: 8px 0 0;
}

.projectDetail-content {
    width: min(820px, 100%);
    margin: 0 auto;
}

.projectDetail-markdown h1,
.projectDetail-markdown h2,
.projectDetail-markdown h3,
.projectDetail-markdown p,
.projectDetail-markdown ul,
.projectDetail-markdown pre,
.projectDetail-markdown figure {
    margin: 0;
}

.projectDetail-markdown h1,
.projectDetail-markdown h2,
.projectDetail-markdown h3 {
    color: #000;
    font-weight: 800;
}

.projectDetail-markdown h1 + p,
.projectDetail-markdown h2,
.projectDetail-markdown h3,
.projectDetail-markdown p + p,
.projectDetail-markdown p + ul,
.projectDetail-markdown ul + p,
.projectDetail-markdown figure,
.projectDetail-markdown pre,
.projectDetail-markdown h2 + p,
.projectDetail-markdown h3 + p {
    margin-top: 22px;
}

.projectDetail-markdown p,
.projectDetail-markdown li {
    color: #222;
    font-size: 1.08rem;
    line-height: 1.75;
}

.projectDetail-markdown ul {
    padding-left: 24px;
}

.projectDetail-media {
    margin: 0;
}

.projectDetail-media--align-left {
    margin-right: auto;
    margin-left: 0;
}

.projectDetail-media--align-center {
    margin-right: auto;
    margin-left: auto;
}

.projectDetail-media--align-right {
    margin-right: 0;
    margin-left: auto;
}

.projectDetail-media--size-narrow {
    max-width: 420px;
}

.projectDetail-media--size-wide {
    max-width: 760px;
}

.projectDetail-media--size-full {
    max-width: 100%;
}

.projectDetail-mediaImage {
    display: block;
    width: 100%;
    border: 2px solid #000;
}

.projectDetail-mediaCaption {
    margin: 10px 0 0;
    color: #555;
    font-size: 0.96rem;
    line-height: 1.5;
}

.projectDetail-markdown a {
    color: #000;
    font-weight: 700;
}

.projectDetail-markdown u {
    text-decoration-thickness: 2px;
    text-underline-offset: 0.14em;
}

.projectDetail-markdown del {
    text-decoration-thickness: 2px;
}

.projectDetail-markdown mark,
.projectDetail-inlineHighlight {
    padding: 0.04em 0.2em;
    background: #fff06a;
    color: inherit;
}

.projectDetail-inlineColor,
.projectDetail-inlineSize {
    color: inherit;
}

.projectDetail-markdown code {
    padding: 2px 6px;
    background: #fff7b8;
    font-family: monospace;
}

.projectDetail-markdown pre {
    padding: 18px;
    border: 2px solid #000;
    background: #f5f5f5;
    overflow-x: auto;
}

.projectDetail-markdown pre code {
    padding: 0;
    background: transparent;
}

.projectEditorPage {
    padding-bottom: 80px;
}

.projectEditorTopbar {
    padding: 24px 0 8px;
}

.projectEditorTopbar-inner {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.projectEditorTopbar-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.projectEditorForm {
    display: contents;
}

.projectEditorTitleInput,
.projectEditorLeadInput {
    width: 100%;
    border: 0;
    background: transparent;
    color: inherit;
    outline: none;
    resize: none;
}

.projectEditorTitleInput {
    margin: 0;
    max-width: 100%;
    color: #000;
    font-size: clamp(3rem, 7vw, 6.5rem);
    font-weight: 900;
    line-height: 0.96;
    letter-spacing: -0.04em;
}

.projectEditorLeadInput {
    margin: 18px 0 0;
    max-width: 44rem;
    color: #3b3b3b;
    font-size: clamp(1.1rem, 1.8vw, 1.45rem);
    line-height: 1.5;
}

.projectEditorTitleInput::placeholder,
.projectEditorLeadInput::placeholder {
    color: #717171;
}

.projectEditorWorkspace {
    padding-top: 10px;
}

.projectEditorWorkspace-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-content: stretch;
    gap: 0;
    align-items: start;
}

.projectEditorMain {
    min-width: 0;
}

.projectEditorComposer {
    gap: 14px;
}

.projectEditorToolbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-left: auto;
}

.projectEditorFormatTools {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.projectEditorBlocksPanel .adminBlocksPanel-head,
.projectEditorCanvas {
    width: min(100%, 920px);
}

.projectEditorCanvas {
    gap: 14px;
    padding: 6px 8px 48px;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
}

.projectEditorSource {
    width: min(920px, 100%);
    margin: 0 auto;
}

.projectEditorCoverEmpty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 260px;
    background: linear-gradient(135deg, #f2f2f2 0%, #ebebeb 100%);
}

.projectEditorCoverEmptyText {
    margin: 0;
    color: #555;
    font-size: 1rem;
    line-height: 1.5;
}

.projectEditorMetaStatus {
    display: flex;
    align-items: center;
}

.projectEditorMetaLabel {
    display: inline-flex;
    padding: 10px 14px;
    border: 1px solid #000;
    background: #fff;
    font-size: 0.92rem;
    line-height: 1.2;
}

.projectEditorTagsPreview {
    min-height: 44px;
}

.projectEditorCoverButton {
    position: relative;
    display: block;
    cursor: pointer;
}

.projectEditorCoverButton:hover .projectEditorCoverHint,
.projectEditorCoverButton:focus-within .projectEditorCoverHint {
    opacity: 1;
    transform: translateY(0);
}

.projectEditorCoverHint {
    position: absolute;
    right: 22px;
    bottom: 22px;
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 8px 14px;
    border: 2px solid #000;
    border-radius: 0;
    background: rgba(255, 255, 255, 0.88);
    color: #000;
    font-size: 0.92rem;
    font-weight: 600;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.16s ease, transform 0.16s ease;
    backdrop-filter: blur(10px);
}

.adminShell {
    display: grid;
    grid-template-columns: minmax(250px, 320px) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

.adminSidebar {
    position: sticky;
    top: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.adminSidebar-head,
.adminPanel,
.adminEditor,
.adminTagEditor {
    padding: 20px;
    border: 2px solid #000;
    border-radius: 0;
    background: #fff;
    box-shadow: 7px 7px 0 #000;
}

.adminSidebar-head {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.adminSidebarList,
.adminTagList {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.adminSidebarCard {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    border: 1px solid #000;
    border-radius: 0;
    background: #fff;
    color: #000;
    text-decoration: none;
    transition: transform 0.15s ease, border-width 0.15s ease, background-color 0.15s ease;
}

.adminSidebarCard:hover {
    transform: translateY(-1px);
}

.adminSidebarCard.is-active {
    background: #ffff00;
    border-width: 2px;
}

.adminSidebarCard-kicker,
.adminSidebarCard-meta {
    color: #555;
    font-size: 0.84rem;
    line-height: 1.3;
}

.adminSidebarCard-title {
    font-size: 0.98rem;
    font-weight: 800;
    line-height: 1.3;
}

.adminWorkspace {
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-width: 0;
}

.adminEditor-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.adminForm-full {
    gap: 24px;
}

.adminForm-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.9fr);
    gap: 20px;
    align-items: start;
}

.adminComposer {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.projectEditorUtilityBar {
    position: sticky;
    top: 18px;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: min(100%, 920px);
    margin: 0 auto;
    padding: 10px 12px;
    border: 2px solid #000;
    border-radius: 0;
    background: rgba(255, 255, 255, 0.84);
    box-shadow: 7px 7px 0 #000;
    backdrop-filter: blur(12px);
}

.adminViewSwitch {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.adminGhostButton.is-active {
    background: #ffff00;
}

.adminComposerGrid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
    gap: 18px;
    align-items: start;
}

.adminComposer[data-view="render"] .adminComposerGrid {
    grid-template-columns: 1fr;
}

.adminComposer[data-view="render"] .adminEditorField {
    display: none;
}

.adminComposer[data-view="source"] .adminComposerGrid {
    grid-template-columns: 1fr;
}

.adminComposer[data-view="source"] .adminBlocksPanel {
    display: none;
}

.adminEditorField {
    position: relative;
}

.adminBlocksPanel {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 8px 0 0;
    border: 0;
    background: transparent;
}

.adminBlocksPanel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    width: min(100%, 920px);
    margin: 0 auto;
    padding: 0 8px;
}

.adminBlocksCanvas {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: min(100%, 920px);
    margin: 0 auto;
    padding: 0 8px 18px;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.adminBlock {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    padding: 2px 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    transition: background-color 0.16s ease, box-shadow 0.16s ease;
}

.adminBlock:hover {
    background: rgba(0, 0, 0, 0.024);
}

.adminBlock.is-active {
    background: rgba(255, 255, 0, 0.06);
    box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.12);
}

.adminBlock-controls {
    position: static;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    justify-self: center;
    width: 20px;
    padding-top: 4px;
    opacity: 0;
    pointer-events: none;
    transform: translateX(-4px);
    transition: opacity 0.16s ease, transform 0.16s ease;
}

.adminBlock:hover .adminBlock-controls,
.adminBlock.is-active .adminBlock-controls,
.adminBlock:focus-within .adminBlock-controls {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
}

.adminBlock-body {
    display: block;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    padding: 0;
}

.adminBlock--paragraph .adminBlock-body,
.adminBlock--quote .adminBlock-body,
.adminBlock--list .adminBlock-body,
.adminBlock--code .adminBlock-body {
    width: 100%;
}

.adminBlock--image .adminBlock-body {
    width: 100%;
}

.adminBlock--heading .adminBlock-body,
.adminBlock--paragraph .adminBlock-body,
.adminBlock--quote .adminBlock-body {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
}

.adminBlockTextFrame {
    display: block;
    width: 100%;
    min-width: 0;
}

.adminRichField {
    position: relative;
    width: 100%;
}

.adminRichField-preview {
    min-height: 1.4em;
    padding: 2px 4px;
    white-space: pre-wrap;
    word-break: break-word;
    color: #1d1d1d;
    pointer-events: none;
}

.adminRichField--heading .adminRichField-preview {
    padding: 0;
    font-weight: 800;
    letter-spacing: -0.035em;
}

.adminRichField--quote .adminRichField-preview {
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 20px;
    border-left: 3px solid rgba(0, 0, 0, 0.18);
    font-style: italic;
}

.adminRichField--list-item .adminRichField-preview {
    padding: 0;
    line-height: 1.75;
}

.adminMarkdownMarker {
    opacity: 0;
    color: rgba(0, 0, 0, 0.28);
    transition: opacity 0.14s ease;
}

.adminBlock.is-active .adminMarkdownMarker,
.adminBlock:focus-within .adminMarkdownMarker {
    opacity: 1;
}

.adminBlock-row {
    display: grid;
    grid-template-columns: min-content minmax(0, 1fr);
    gap: 8px;
    width: 100%;
    align-items: start;
}

.adminBlock-row--heading {
    align-items: baseline;
}

.adminBlockInput,
.adminBlockTextarea,
.adminBlockSelect {
    display: block;
    box-sizing: border-box;
    min-width: 0;
    width: 100%;
    inline-size: 100%;
    max-inline-size: none;
    padding: 2px 4px;
    border: 1px solid transparent;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    font-size: 1.06rem;
    line-height: 1.6;
    transition: background-color 0.14s ease, border-color 0.14s ease;
}

.adminRichField > .adminBlockInput,
.adminRichField > .adminBlockTextarea {
    position: absolute;
    inset: 0;
    color: transparent;
    -webkit-text-fill-color: transparent;
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    caret-color: #000;
}

.adminRichField > .adminBlockInput::selection,
.adminRichField > .adminBlockTextarea::selection {
    background: rgba(255, 255, 0, 0.35);
    color: transparent;
}

.adminRichField > .adminBlockInput::placeholder,
.adminRichField > .adminBlockTextarea::placeholder {
    color: rgba(0, 0, 0, 0.28);
}

.adminRichField > .adminBlockInput:hover,
.adminRichField > .adminBlockTextarea:hover,
.adminRichField > .adminBlockInput:focus,
.adminRichField > .adminBlockTextarea:focus {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

.adminBlockInput:hover,
.adminBlockTextarea:hover,
.adminBlockSelect:hover {
    background: rgba(0, 0, 0, 0.025);
}

.adminBlockInput:focus,
.adminBlockTextarea:focus,
.adminBlockSelect:focus {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(0, 0, 0, 0.08);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02);
}

.adminBlockTextarea {
    min-height: 1.4em;
    -webkit-appearance: none;
    appearance: none;
    align-self: stretch;
    flex: 1 1 auto;
    resize: none;
    overflow: hidden;
}

.adminBlockTextarea-code {
    min-height: 9em;
    font-family: monospace;
}

.adminBlockInput-lang {
    max-width: 180px;
}

.adminBlock--heading .adminBlockInput {
    padding: 0;
    width: 100%;
    font-weight: 800;
    letter-spacing: -0.035em;
}

.adminBlock--heading .adminBlockInput {
    background: transparent;
}

.adminBlock--heading .adminBlockInput:focus {
    background: rgba(255, 255, 255, 0.92);
}

.adminBlock--heading[data-heading-level="1"] .adminBlockInput {
    max-width: 100%;
    font-size: clamp(2.5rem, 5.4vw, 4.4rem);
    line-height: 0.98;
}

.adminBlock--heading[data-heading-level="1"] .adminRichField-preview {
    font-size: clamp(2.5rem, 5.4vw, 4.4rem);
    line-height: 0.98;
}

.adminBlock--heading[data-heading-level="2"] .adminBlockInput {
    max-width: 100%;
    font-size: clamp(1.8rem, 3.4vw, 2.7rem);
    line-height: 1.06;
}

.adminBlock--heading[data-heading-level="2"] .adminRichField-preview {
    font-size: clamp(1.8rem, 3.4vw, 2.7rem);
    line-height: 1.06;
}

.adminBlock--heading[data-heading-level="3"] .adminBlockInput {
    max-width: 100%;
    font-size: clamp(1.24rem, 2.1vw, 1.6rem);
    line-height: 1.18;
}

.adminBlock--heading[data-heading-level="3"] .adminRichField-preview {
    font-size: clamp(1.24rem, 2.1vw, 1.6rem);
    line-height: 1.18;
}

.adminBlock--paragraph .adminRichField-preview,
.adminBlock--quote .adminRichField-preview {
    font-size: 1.08rem;
    line-height: 1.75;
}

.adminBlock--code .adminRichField-preview,
.adminBlock--code .adminBlockTextarea {
    font-family: monospace;
}

.adminBlock--paragraph .adminBlockTextarea,
.adminBlock--quote .adminBlockTextarea {
    padding: 0;
    max-width: none;
    width: 100%;
    min-width: 0;
    inline-size: 100%;
    font-size: 1.08rem;
    line-height: 1.75;
    color: #222;
}

.adminBlock--quote .adminBlockTextarea {
    padding-left: 20px;
    border-left: 3px solid rgba(0, 0, 0, 0.18);
    font-style: italic;
    color: #2a2a2a;
}

.adminBlock--code .adminBlockTextarea,
.adminBlock--code .adminBlockInput-lang {
    border-color: rgba(0, 0, 0, 0.08);
    background: rgba(0, 0, 0, 0.03);
}

.adminBlock--list .adminBlockList {
    width: 100%;
    padding-left: 24px;
}

.adminBlock--list .adminBlockListItem {
    position: relative;
    width: 100%;
}

.adminBlock--list .adminBlockListItem::before {
    content: '';
    position: absolute;
    top: 50%;
    left: -16px;
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: currentColor;
    transform: translateY(-50%);
}

.adminBlock--list .adminBlockInput {
    padding: 0;
    max-width: none;
    width: 100%;
    min-width: 0;
    inline-size: 100%;
    font-size: 1.08rem;
    line-height: 1.75;
}

.adminBlock--image .adminBlockImage {
    grid-template-columns: minmax(0, 1fr) 260px;
    align-items: start;
    gap: 22px;
}

.adminBlock--image .projectDetail-media {
    width: 100%;
    max-width: 100%;
}

.adminBlockList {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.adminBlockImage {
    display: grid;
    grid-template-columns: minmax(180px, 280px) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.adminBlockImage-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 160px;
    padding: 10px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    background: #f7f7f7;
}

.adminBlockImage-preview img {
    display: block;
    width: 100%;
    max-height: 240px;
    object-fit: contain;
}

.adminBlockImage-preview.is-empty {
    color: #555;
}

.adminBlockImage-fields {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 0;
    background: rgba(255, 255, 255, 0.72);
}

.projectEditorCanvas .adminGhostButton {
    min-width: 28px;
    min-height: 28px;
    padding: 0;
    border-color: rgba(0, 0, 0, 0.06);
    background: rgba(255, 255, 255, 0.86);
    font-size: 0.82rem;
}

.projectEditorCanvas .adminBlocksPanel-head {
    opacity: 0.72;
}

.adminBlockImage-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.adminComposer-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0;
    border: 0;
    background: transparent;
}

.adminMarkdownCanvas {
    min-height: 56vh;
    padding: 24px 28px;
    border: 2px solid #000;
    border-radius: 0;
    background: rgba(255, 255, 255, 0.88);
    font-size: 1rem;
    line-height: 1.75;
    box-shadow: 7px 7px 0 #000;
}

.adminSlashMenu {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 40;
    width: min(calc(100vw - 24px), 340px);
    max-height: min(52vh, 420px);
    padding: 12px;
    border: 2px solid #000;
    border-radius: 0;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 8px 8px 0 #000;
    overflow-y: auto;
    backdrop-filter: blur(14px);
}

.adminSlashMenu-title,
.adminPreviewState {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1.3;
}

.adminSlashMenu-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
}

.adminSlashMenu-item {
    display: flex;
    flex-direction: column;
    gap: 3px;
    width: 100%;
    padding: 10px 12px;
    border: 2px solid #000;
    background: #fff;
    color: #000;
    text-align: left;
    font: inherit;
    cursor: pointer;
}

.adminBlockListItem {
    display: flex;
}

.adminToolButton,
.adminGhostButton {
    min-height: 36px;
    padding: 8px 12px;
    border-radius: 0;
    border-width: 2px;
    box-shadow: 5px 5px 0 #000;
    font-size: 0.92rem;
    line-height: 1.2;
}

.adminToolButton {
    background: rgba(255, 255, 255, 0.92);
}

.adminGhostButton {
    background: rgba(255, 255, 255, 0.78);
}

.adminBlock .adminGhostButton {
    min-width: 34px;
    min-height: 34px;
    padding: 0;
    background: rgba(255, 255, 255, 0.94);
}

.adminSlashMenu-item.is-active,
.adminSlashMenu-item:hover {
    background: #ffff00;
}

.adminSlashMenu-itemTitle {
    font-size: 0.95rem;
    font-weight: 800;
}

.adminSlashMenu-itemText {
    color: #555;
    font-size: 0.84rem;
    line-height: 1.35;
}

.adminWorkspaceMeta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.adminMetaCard {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    border: 2px solid #000;
    border-radius: 0;
    background: #fff;
    box-shadow: 7px 7px 0 #000;
}

.adminMetaCard-head {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.adminMetaCard-title {
    margin: 0;
    color: #000;
    font-size: 1.05rem;
    font-weight: 800;
}

.adminHelperList {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.adminForm-footer {
    display: flex;
    justify-content: flex-end;
}

.adminTagListItem {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 12px;
    border: 1px solid #000;
}

.adminLoginCard {
    width: min(100%, 520px);
    margin: 0 auto;
    padding: 28px;
    border: 3px solid #000;
    background: #fff;
    box-shadow: 9px 9px 0 #000;
}

.adminHeader {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 24px;
}

.adminGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
    gap: 24px;
    margin-top: 24px;
}

.adminSectionHead {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.adminForm {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.adminCheckboxGrid {
    gap: 10px;
}

.adminCheckbox {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 11px;
    border: 2px solid #000;
    background: #fff;
    font-size: 0.95rem;
    line-height: 1.3;
}

.adminMarkdownInput {
    min-height: 280px;
    font-family: monospace;
}

.adminFieldHelp,
.adminImagePreview-meta {
    margin: 0;
    color: #555;
    font-size: 0.9rem;
    line-height: 1.45;
}

.adminImagePreview {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    border: 1px solid #000;
    background: #fff;
}

.adminImagePreview.is-empty {
    align-items: flex-start;
    justify-content: center;
    min-height: 120px;
}

.adminImagePreview-image {
    display: block;
    width: 100%;
    max-width: 360px;
    border: 2px solid #000;
}

.contactInput-file {
    padding-block: 14px;
}

.adminUploadInline {
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.adminUploadStatus {
    min-height: 1.2em;
    margin: 0;
    color: #555;
    font-size: 0.88rem;
    line-height: 1.4;
}

.adminList {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.adminListItem {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 16px;
    border: 2px solid #000;
}

.adminListTitle,
.adminListMeta {
    margin: 0;
}

.adminListTitle {
    font-size: 0.98rem;
    font-weight: 800;
    line-height: 1.3;
}

.adminListMeta {
    margin-top: 6px;
    color: #555;
    font-size: 0.86rem;
    line-height: 1.3;
}

.adminGhostButton,
.adminToolButton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 9px 12px;
    border: 2px solid #000;
    background: #fff;
    color: #000;
    text-decoration: none;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: transform 0.15s ease, background-color 0.15s ease, border-width 0.15s ease;
}

.adminGhostButton:hover,
.adminToolButton:hover {
    transform: translateY(-1px);
    background: #f5f5f5;
}

.projectEditorMenu {
    position: relative;
}

.projectEditorMenu[open] {
    z-index: 30;
}

.projectEditorMenuButton {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 38px;
    padding: 8px 14px;
    border: 2px solid #000;
    border-radius: 0;
    background: #fff;
    box-shadow: 5px 5px 0 #000;
    color: #000;
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}

.projectEditorMenuButton::-webkit-details-marker {
    display: none;
}

.projectEditorMenuPanel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: min(360px, calc(100vw - 32px));
    padding: 14px;
    border: 2px solid #000;
    border-radius: 0;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 8px 8px 0 #000;
    backdrop-filter: blur(14px);
}

.projectEditorMenuPanel--actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.projectEditorIconSprite {
    position: absolute;
}

.projectEditorMenuIcon {
    display: inline-block;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.projectEditorIconButton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 2px solid #000;
    border-radius: 0;
    background: #fff;
    box-shadow: 5px 5px 0 #000;
    color: #000;
    font: inherit;
    font-size: 1rem;
    font-weight: 800;
    cursor: pointer;
}

.projectEditorFormatButton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 42px;
    padding: 0 10px;
    border: 2px solid #000;
    border-radius: 0;
    background: #fff;
    box-shadow: 5px 5px 0 #000;
    color: #000;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 800;
    cursor: pointer;
}

.projectEditorActionIcon {
    width: 18px;
    height: 18px;
}

.projectEditorIconButton-danger {
    background: #fff2f2;
}

.projectEditorStatusRow {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding-top: 8px;
}

.adminBlockMove,
.adminBlockDelete {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    min-width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #000;
    font: inherit;
    cursor: pointer;
    transition: transform 0.14s ease, color 0.14s ease;
}

.adminBlockMove,
.adminBlockDelete {
    color: rgba(0, 0, 0, 0.55);
}

.adminBlockIcon {
    width: 18px;
    height: 18px;
}

.adminBlockMove:hover,
.adminBlockMove:focus,
.adminBlockDelete:hover,
.adminBlockDelete:focus {
    transform: scale(1.12);
    color: #000;
}

.adminBlockMarkdownToken {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    padding: 0;
    border: 0;
    background: transparent;
    color: rgba(0, 0, 0, 0.22);
    font: inherit;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    opacity: 0;
    transition: opacity 0.14s ease, color 0.14s ease;
    cursor: pointer;
}

.adminBlock.is-active .adminBlockMarkdownToken,
.adminBlock:focus-within .adminBlockMarkdownToken,
.adminBlock:hover .adminBlockMarkdownToken {
    opacity: 1;
}

.adminBlockMarkdownToken:hover,
.adminBlockMarkdownToken:focus {
    color: rgba(0, 0, 0, 0.46);
}

.adminGhostButton-danger {
    background: #fff2f2;
}

.adminToolButton {
    gap: 8px;
    border-color: #000;
    background: #fff;
}

.adminToolButton::before {
    content: "";
    width: 8px;
    height: 8px;
    border: 1px solid #000;
    background: #ffff00;
    flex-shrink: 0;
}

.projectFilter-danger {
    background: #fff2f2;
}

.adminListActions form {
    margin: 0;
}

.legalPage {
    padding-bottom: 88px;
}

.legalHero,
.legalSection {
    scroll-margin-top: calc(var(--nav-height-offset) + 12px);
}

.legalHero {
    padding: 0 0 48px;
}

.legalContainer {
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
}

.legalKicker,
.legalTitle,
.legalLead,
.legalSectionTitle,
.legalText {
    margin: 0;
}

.legalKicker {
    color: #7a7a7a;
    font-size: 0.95rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.legalTitle {
    margin-top: 8px;
    color: #000;
    font-size: clamp(2.4rem, 5vw, 4.8rem);
    font-weight: 900;
    line-height: 0.95;
}

.legalLead {
    margin-top: 16px;
    max-width: 34ch;
    color: #3b3b3b;
    font-size: 1.1rem;
    line-height: 1.45;
}

.legalSection {
    padding-top: 24px;
}

.legalCard {
    padding: 28px;
    border: 3px solid #000;
    background: #fff;
    box-shadow: 9px 9px 0 #000;
}

.legalSectionTitle {
    margin-bottom: 16px;
    color: #000;
    font-size: clamp(1.4rem, 2.2vw, 2rem);
    font-weight: 800;
}

.legalText + .legalText {
    margin-top: 12px;
}

.legalText {
    color: #222;
    font-size: 1.02rem;
    line-height: 1.55;
}

.legalLink {
    color: #000;
    font-weight: 700;
    text-decoration: underline;
}

.siteFooter {
    position: relative;
    margin-top: var(--section-space);
    margin-right: calc(var(--page-gutter) * -1);
    margin-bottom: -20px;
    margin-left: calc(var(--page-gutter) * -1);
    overflow: hidden;
    background: #ffffff;
}

.siteFooter-inner {
    position: relative;
    min-height: 52vh;
    padding: 56px var(--page-gutter) 48px;
}

.siteFooter::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 32%;
    min-height: 160px;
    background: #ffff00;
    z-index: 2;
}

.siteFooter-content {
    position: relative;
    z-index: 1;
    max-width: min(520px, 100%);
}

.siteFooter-links {
    position: absolute;
    right: var(--page-gutter);
    bottom: 24px;
    z-index: 3;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px 18px;
    max-width: min(560px, calc(100% - (var(--page-gutter) * 2)));
}

.siteFooter-link {
    color: rgba(0, 0, 0, 0.72);
    font-size: 0.92rem;
    font-weight: 500;
    text-decoration: none;
    line-height: 1.2;
}

.siteFooter-link:hover {
    color: #000;
    text-decoration: underline;
}

.siteFooter-kicker,
.siteFooter-title,
.siteFooter-text,
.siteFooter-signature {
    margin: 0;
}

.siteFooter-kicker {
    color: #000;
    font-size: 0.95rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.siteFooter-title {
    margin-top: 10px;
    color: #000;
    font-size: clamp(2.4rem, 5vw, 5rem);
    font-weight: 900;
    line-height: 0.96;
    text-transform: uppercase;
}

.siteFooter-text {
    margin-top: 18px;
    max-width: 26ch;
    color: #1f1f1f;
    font-size: clamp(1rem, 1.5vw, 1.2rem);
    line-height: 1.4;
}

.siteFooter-signature {
    position: absolute;
    right: 0;
    bottom: 0.08em;
    z-index: 1;
    color: var(--color-footer-signature);
    font-size: clamp(5rem, 18vw, 18rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    pointer-events: none;
}

html[data-theme="dark"] body,
html[data-theme="dark"] .navBar-title a,
html[data-theme="dark"] .pretitle,
html[data-theme="dark"] .title,
html[data-theme="dark"] .projectSection-title,
html[data-theme="dark"] .projectCard-title,
html[data-theme="dark"] .projectCard-link,
html[data-theme="dark"] .socialCard-name,
html[data-theme="dark"] .contactLabel,
html[data-theme="dark"] .legalTitle,
html[data-theme="dark"] .legalSectionTitle,
html[data-theme="dark"] .legalLink,
html[data-theme="dark"] .siteFooter-kicker,
html[data-theme="dark"] .siteFooter-title {
    color: var(--color-text);
}

html[data-theme="dark"] .subtitle,
html[data-theme="dark"] .projectSection-kicker,
html[data-theme="dark"] .projectFiltersToggle-label,
html[data-theme="dark"] .contactInput::placeholder,
html[data-theme="dark"] .contactTextarea::placeholder,
html[data-theme="dark"] .legalKicker,
html[data-theme="dark"] .adminListMeta,
html[data-theme="dark"] .contactText,
html[data-theme="dark"] .legalLead,
html[data-theme="dark"] .siteFooter-link,
html[data-theme="dark"] .projectDetail-markdown p,
html[data-theme="dark"] .projectDetail-markdown li {
    color: var(--color-text-soft);
}

html[data-theme="dark"] .projectCard-description,
html[data-theme="dark"] .legalText,
html[data-theme="dark"] .siteFooter-text,
html[data-theme="dark"] .socialCard-fallback {
    color: var(--color-text-muted);
}

html[data-theme="dark"] .navBar-button-primary a,
html[data-theme="dark"] .navBar-button-tertiary a,
html[data-theme="dark"] .navBar-button-secondary a,
html[data-theme="dark"] .button,
html[data-theme="dark"] .projectFiltersToggle,
html[data-theme="dark"] .projectFilter.is-active,
html[data-theme="dark"] .socialCard:hover,
html[data-theme="dark"] .socialCard-iconWrap,
html[data-theme="dark"] .contactFeedback-success,
html[data-theme="dark"] .navBar-burger,
html[data-theme="dark"] .navBar-overlayPanel,
html[data-theme="dark"] .siteFooter::after {
    background: var(--color-accent);
    color: var(--color-accent-text);
}

html[data-theme="dark"] .themeToggle,
html[data-theme="dark"] .navBar-overlayTheme,
html[data-theme="dark"] .projectFilters,
html[data-theme="dark"] .projectFilter,
html[data-theme="dark"] .projectCard,
html[data-theme="dark"] .projectCard-tag,
html[data-theme="dark"] .projectEmpty,
html[data-theme="dark"] .socialCard,
html[data-theme="dark"] .contactPanel,
html[data-theme="dark"] .contactFeedback-error,
html[data-theme="dark"] .contactInput,
html[data-theme="dark"] .contactTextarea,
html[data-theme="dark"] .button-secondaryInline,
html[data-theme="dark"] .projectDetail-cover,
html[data-theme="dark"] .projectDetail-markdown pre,
html[data-theme="dark"] .adminLoginCard,
html[data-theme="dark"] .legalCard,
html[data-theme="dark"] .adminCheckbox,
html[data-theme="dark"] .adminListItem,
html[data-theme="dark"] .navBar-close,
html[data-theme="dark"] .navBar-overlayLink {
    background: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-text);
    box-shadow: 7px 7px 0 var(--color-shadow);
}

html[data-theme="dark"] .projectFilters {
    box-shadow: 9px 9px 0 var(--color-shadow);
}

html[data-theme="dark"] .projectCard-image,
html[data-theme="dark"] .projectCard-imagePlaceholder {
    border-color: var(--color-border);
}

html[data-theme="dark"] .projectCard-imagePlaceholder,
html[data-theme="dark"] .projectDetail-markdown pre {
    background: linear-gradient(135deg, var(--color-surface-muted) 0%, var(--color-surface-soft) 100%);
}

html[data-theme="dark"] .contactFeedback-error,
html[data-theme="dark"] .projectFilter-danger {
    background: var(--color-danger-bg);
}

html[data-theme="dark"] .contactInput:focus,
html[data-theme="dark"] .contactTextarea:focus {
    background: var(--color-focus-bg);
}

html[data-theme="dark"] .projectDetail-markdown code {
    background: var(--color-code-bg);
}

html[data-theme="dark"] .projectDetail-markdown mark,
html[data-theme="dark"] .projectDetail-inlineHighlight {
    background: #8a6f14;
    color: var(--color-text);
}

html[data-theme="dark"] .navBar-overlay {
    background: var(--color-overlay);
}

html[data-theme="dark"] .siteFooter {
    background: var(--color-bg);
}

html[data-theme="dark"] .siteFooter-link {
    color: var(--color-accent-text);
}

html[data-theme="dark"] .siteFooter-link:hover,
html[data-theme="dark"] .projectCard-link:hover,
html[data-theme="dark"] .legalLink:hover,
html[data-theme="dark"] .projectDetail-markdown a:hover {
    color: var(--color-accent-text);
}

html[data-theme="dark"] .projectFilter {
    color: var(--color-text-muted);
}

html[data-theme="dark"] .projectFilter.is-active {
    color: var(--color-accent-text);
}

html[data-theme="dark"] .projectDetail-markdown h1,
html[data-theme="dark"] .projectDetail-markdown h2,
html[data-theme="dark"] .projectDetail-markdown h3,
html[data-theme="dark"] .projectDetail-markdown a,
html[data-theme="dark"] .adminListTitle,
html[data-theme="dark"] .projectDetail-mediaCaption,
html[data-theme="dark"] .adminFieldHelp,
html[data-theme="dark"] .adminImagePreview-meta,
html[data-theme="dark"] .projectCard-imagePlaceholder,
html[data-theme="dark"] .projectFiltersToggle-value {
    color: var(--color-text);
}

html[data-theme="dark"] .projectDetail-title,
html[data-theme="dark"] .adminMetaCard-title,
html[data-theme="dark"] .adminSidebarCard-title,
html[data-theme="dark"] .projectEditorTitleInput {
    color: var(--color-text);
}

html[data-theme="dark"] .projectDetail-lead,
html[data-theme="dark"] .adminSidebarCard-kicker,
html[data-theme="dark"] .adminSidebarCard-meta,
html[data-theme="dark"] .adminUploadStatus,
html[data-theme="dark"] .adminSlashMenu-itemText,
html[data-theme="dark"] .adminBlockImage-preview.is-empty,
html[data-theme="dark"] .projectEditorLeadInput,
html[data-theme="dark"] .projectEditorCoverEmptyText {
    color: var(--color-text-soft);
}

html[data-theme="dark"] .projectEditorMetaLabel,
html[data-theme="dark"] .projectEditorCoverEmpty {
    background: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-text);
}

html[data-theme="dark"] .projectEditorCanvas {
    background: transparent;
    box-shadow: none;
}

html[data-theme="dark"] .projectEditorUtilityBar,
html[data-theme="dark"] .projectEditorMenuButton,
html[data-theme="dark"] .projectEditorMenuPanel,
html[data-theme="dark"] .projectEditorCoverHint,
html[data-theme="dark"] .adminSlashMenu,
html[data-theme="dark"] .projectEditorIconButton,
html[data-theme="dark"] .projectEditorFormatButton {
    background: rgba(15, 23, 42, 0.88);
    border-color: rgba(148, 163, 184, 0.16);
    color: var(--color-text);
}

html[data-theme="dark"] .adminBlock:hover {
    background: rgba(148, 163, 184, 0.05);
}

html[data-theme="dark"] .adminBlock.is-active {
    background: rgba(250, 204, 21, 0.08);
    box-shadow: inset 1px 0 0 rgba(245, 247, 255, 0.18);
}

html[data-theme="dark"] .adminBlockImage-fields,
html[data-theme="dark"] .projectEditorCanvas .adminGhostButton {
    background: rgba(15, 23, 42, 0.78);
    border-color: rgba(148, 163, 184, 0.16);
}

html[data-theme="dark"] .adminImagePreview,
html[data-theme="dark"] .adminImagePreview-image,
html[data-theme="dark"] .projectDetail-mediaImage,
html[data-theme="dark"] .adminSidebar-head,
html[data-theme="dark"] .adminPanel,
html[data-theme="dark"] .adminEditor,
html[data-theme="dark"] .adminTagEditor,
html[data-theme="dark"] .adminMetaCard,
html[data-theme="dark"] .adminSidebarCard,
html[data-theme="dark"] .adminTagListItem,
html[data-theme="dark"] .adminMarkdownCanvas,
html[data-theme="dark"] .adminComposer-toolbar,
html[data-theme="dark"] .adminGhostButton,
html[data-theme="dark"] .adminToolButton,
html[data-theme="dark"] .adminSlashMenu,
html[data-theme="dark"] .adminSlashMenu-item,
html[data-theme="dark"] .adminBlocksPanel,
html[data-theme="dark"] .adminBlock,
html[data-theme="dark"] .adminBlockImage-preview {
    background: var(--color-surface);
    border-color: var(--color-border);
}

html[data-theme="dark"] .adminSidebar-head,
html[data-theme="dark"] .adminPanel,
html[data-theme="dark"] .adminEditor,
html[data-theme="dark"] .adminTagEditor,
html[data-theme="dark"] .adminMetaCard {
    background: var(--color-surface);
    box-shadow: 7px 7px 0 var(--color-shadow);
}

html[data-theme="dark"] .adminBlocksPanel {
    background: transparent;
    border-color: transparent;
}

html[data-theme="dark"] .adminBlocksCanvas {
    background: transparent;
    box-shadow: none;
}

html[data-theme="dark"] .adminBlock {
    background: transparent;
}

html[data-theme="dark"] .adminBlock:hover {
    background: rgba(148, 163, 184, 0.08);
}

html[data-theme="dark"] .adminBlock.is-active {
    background: rgba(250, 204, 21, 0.12);
    box-shadow: inset 3px 0 0 var(--color-text);
}

html[data-theme="dark"] .adminBlockInput:hover,
html[data-theme="dark"] .adminBlockTextarea:hover,
html[data-theme="dark"] .adminBlockSelect:hover {
    background: rgba(148, 163, 184, 0.08);
}

html[data-theme="dark"] .adminBlockInput:focus,
html[data-theme="dark"] .adminBlockTextarea:focus,
html[data-theme="dark"] .adminBlockSelect:focus {
    background: rgba(15, 23, 42, 0.92);
    border-color: rgba(148, 163, 184, 0.18);
}

html[data-theme="dark"] .projectEditorIconButton-danger {
    background: #5a262f;
}

html[data-theme="dark"] .adminBlockMove,
html[data-theme="dark"] .adminBlockDelete,
html[data-theme="dark"] .adminBlockMarkdownToken {
    color: rgba(245, 247, 255, 0.4);
}

html[data-theme="dark"] .adminRichField-preview {
    color: var(--color-text-muted);
}

html[data-theme="dark"] .adminRichField--quote .adminRichField-preview {
    border-left-color: rgba(245, 247, 255, 0.2);
}

html[data-theme="dark"] .adminMarkdownMarker {
    color: rgba(245, 247, 255, 0.34);
}

html[data-theme="dark"] .adminRichField > .adminBlockInput,
html[data-theme="dark"] .adminRichField > .adminBlockTextarea {
    caret-color: var(--color-text);
}

html[data-theme="dark"] .adminRichField > .adminBlockInput::placeholder,
html[data-theme="dark"] .adminRichField > .adminBlockTextarea::placeholder {
    color: rgba(245, 247, 255, 0.28);
}

html[data-theme="dark"] .adminBlockMove:hover,
html[data-theme="dark"] .adminBlockMove:focus,
html[data-theme="dark"] .adminBlockDelete:hover,
html[data-theme="dark"] .adminBlockDelete:focus,
html[data-theme="dark"] .adminBlockMarkdownToken:hover,
html[data-theme="dark"] .adminBlockMarkdownToken:focus {
    color: var(--color-text);
}

html[data-theme="dark"] .adminBlock .adminGhostButton,
html[data-theme="dark"] .adminGhostButton,
html[data-theme="dark"] .adminToolButton {
    background: rgba(15, 23, 42, 0.74);
    border-color: rgba(148, 163, 184, 0.18);
}

html[data-theme="dark"] .adminSidebarCard.is-active {
    background: var(--color-accent);
    color: var(--color-accent-text);
    border-color: var(--color-border);
    box-shadow: none;
}

html[data-theme="dark"] .adminSidebarCard.is-active .adminSidebarCard-title,
html[data-theme="dark"] .adminSidebarCard.is-active .adminSidebarCard-kicker,
html[data-theme="dark"] .adminSidebarCard.is-active .adminSidebarCard-meta {
    color: var(--color-accent-text);
}

html[data-theme="dark"] .adminGhostButton,
html[data-theme="dark"] .adminToolButton {
    color: var(--color-text);
}

html[data-theme="dark"] .adminGhostButton.is-active {
    background: var(--color-accent);
    color: var(--color-accent-text);
}

html[data-theme="dark"] .adminGhostButton:hover,
html[data-theme="dark"] .adminToolButton:hover {
    background: var(--color-surface-muted);
}

html[data-theme="dark"] .projectEditorMenuButton:hover,
html[data-theme="dark"] .projectEditorMenu[open] .projectEditorMenuButton {
    background: rgba(15, 23, 42, 0.96);
}

html[data-theme="dark"] .adminToolButton::before {
    border-color: var(--color-border);
    background: var(--color-accent);
}

html[data-theme="dark"] .adminSlashMenu-item.is-active,
html[data-theme="dark"] .adminSlashMenu-item:hover {
    background: var(--color-accent);
    color: var(--color-accent-text);
}

html[data-theme="dark"] .adminGhostButton-danger {
    background: var(--color-danger-bg);
}

html[data-theme="dark"] .projectFilter:hover,
html[data-theme="dark"] .button:hover,
html[data-theme="dark"] .themeToggle:hover,
html[data-theme="dark"] .navBar-overlayTheme:hover,
html[data-theme="dark"] .socialCard:hover {
    color: var(--color-text);
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

@media (max-width: 1080px) {
    :root {
        --nav-height-offset: 190px;
    }

    .navBar {
        padding-bottom: 30px;
    }

    .navBar-left,
    .navBar-right {
        width: 100%;
    }

    .navBar-right {
        justify-content: flex-start;
    }

    .heroSection {
        min-height: calc(100vh - 210px);
    }

    .contactPanel {
        grid-template-columns: 1fr;
    }

    .contactText {
        max-width: none;
    }

    .adminShell,
    .adminForm-top,
    .adminComposerGrid,
    .adminWorkspaceMeta {
        grid-template-columns: 1fr;
    }

    .projectEditorTopbar-inner,
    .projectEditorWorkspace-shell,
    .projectDetail-meta {
        grid-template-columns: 1fr;
        flex-direction: column;
        align-items: stretch;
    }

    .projectEditorSidebar {
        position: static;
    }

    .adminSidebar {
        position: static;
    }

    .adminSidebar-head,
    .adminPanel,
    .adminEditor,
    .adminTagEditor {
        padding: 18px;
    }

    .siteFooter-inner {
        min-height: auto;
        padding-bottom: 140px;
    }

    .siteFooter-links {
        position: relative;
        z-index: 3;
        right: auto;
        bottom: auto;
        left: auto;
        margin-top: 32px;
        justify-content: flex-start;
        max-width: none;
    }

    .siteFooter-signature {
        right: -0.04em;
        font-size: clamp(4.5rem, 16vw, 10rem);
    }

    .adminHeader {
        flex-direction: column;
    }
}

@media (max-width: 1320px) {
    .projectEditorWorkspace-shell {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    :root {
        --nav-height-offset: 118px;
        --section-space: clamp(72px, 18vw, 120px);
    }

    body.menu-open {
        overflow: hidden;
    }

    .navBar {
        padding: 14px 0 24px;
    }

    .navBar-container {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .navBar-left,
    .navBar-right {
        width: auto;
    }

    .navBar-right {
        display: none;
    }

    .navBar-burger {
        position: relative;
        z-index: 102;
        display: inline-flex;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        width: 62px;
        height: 62px;
        padding: 0 14px;
        border: 3px solid #000;
        background: #ffff00;
        box-shadow: 7px 7px 0 #000;
        cursor: pointer;
    }

    .navBar-burger span {
        display: block;
        width: 100%;
        height: 3px;
        background: #000;
    }

    .navBar-overlay {
        position: fixed;
        inset: 0;
        z-index: 101;
        display: flex;
        justify-content: flex-end;
        background: rgba(0, 0, 0, 0.16);
        visibility: hidden;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }

    .navBar-overlay.is-open {
        visibility: visible;
        pointer-events: auto;
        opacity: 1;
    }

    .navBar-overlayPanel {
        display: flex;
        flex-direction: column;
        width: 100%;
        min-height: 100%;
        padding: 18px var(--page-gutter) 28px;
        background: #ffff00;
        transform: translateX(100%);
        transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .navBar-overlay.is-open .navBar-overlayPanel {
        transform: translateX(0);
    }

    .navBar-overlay.is-closing .navBar-overlayPanel {
        transform: translateX(100%);
    }

    .navBar-overlayHead {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
    }

    .navBar-overlayTitle {
        color: #000;
        font-size: 0.95rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.08em;
    }

    .navBar-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 62px;
        height: 62px;
        border: 3px solid #000;
        background: #fff;
        color: #000;
        font-size: 2rem;
        font-weight: 500;
        line-height: 1;
        box-shadow: 7px 7px 0 #000;
        cursor: pointer;
    }

    .navBar-overlayBody {
        display: flex;
        flex: 1;
        flex-direction: column;
        justify-content: center;
        gap: 16px;
    }

    .navBar-overlayLink {
        display: block;
        width: 100%;
        padding: 18px 20px;
        border: 3px solid #000;
        background: #fff;
        color: #000;
        text-decoration: none;
        font-size: clamp(1.15rem, 4vw, 1.5rem);
        font-weight: 800;
        box-shadow: 8px 8px 0 #000;
    }

    .heroSection {
        min-height: calc(100vh - 118px);
    }

    .buttonContainer,
    .button {
        width: 100%;
    }

    .projectFilters-desktop {
        display: none;
    }

    .projectFiltersMenu,
    .projectFilters-mobile {
        width: 100%;
    }

    .projectFiltersMenu {
        display: block;
    }

    .projectFilter {
        width: 100%;
        text-align: center;
    }

    .projectGrid {
        grid-template-columns: 1fr;
    }

    .socialGrid {
        grid-template-columns: 1fr;
    }

    .socialCard {
        padding: 16px 18px;
    }

    .contactPanel {
        grid-template-columns: 1fr;
        padding: 22px;
    }

    .contactSubmit {
        width: 100%;
    }

    .projectDetail-actions,
    .projectDetail-meta,
    .adminHeader-actions,
    .adminListItem,
    .adminListActions,
    .adminSectionHead {
        flex-direction: column;
        align-items: stretch;
    }

    .adminEditor-actions,
    .adminForm-footer {
        justify-content: flex-start;
    }

    .projectEditorUtilityBar,
    .projectEditorToolbar {
        flex-wrap: wrap;
    }

    .projectEditorUtilityBar {
        top: 12px;
        padding: 10px;
        border-radius: 16px;
    }

    .projectEditorToolbar {
        justify-content: flex-start;
        margin-left: 0;
    }

    .projectEditorMenuPanel {
        left: 0;
        right: auto;
        width: min(100vw - 32px, 360px);
    }

    .projectEditorCoverHint {
        right: 14px;
        bottom: 14px;
        opacity: 1;
        transform: none;
    }

    .adminGhostButton,
    .adminToolButton {
        width: 100%;
    }

    .adminBlock {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .adminBlock-controls {
        width: auto;
        flex-direction: row;
        flex-wrap: wrap;
        justify-self: start;
        opacity: 1;
        pointer-events: auto;
        transform: none;
        padding-top: 0;
    }

    .adminBlock-controls .adminGhostButton {
        width: auto;
        min-width: 36px;
    }

    .adminBlock-row,
    .adminBlockImage {
        grid-template-columns: 1fr;
    }

    .adminListActions .projectFilter,
    .adminListActions form,
    .adminListActions button {
        width: 100%;
    }

    .legalCard {
        padding: 22px;
    }

    .siteFooter-inner {
        min-height: 44vh;
        padding-top: 40px;
        padding-bottom: 120px;
    }

    .siteFooter-signature {
        right: 0;
        bottom: 0.16em;
        font-size: clamp(4.5rem, 22vw, 8rem);
    }

    .siteFooter-links {
        right: var(--page-gutter);
        bottom: 18px;
        left: var(--page-gutter);
        justify-content: flex-start;
        max-width: none;
    }
}

@media (max-width: 560px) {
    body {
        padding-top: var(--nav-height-offset);
    }

    .navBar {
        padding-top: 14px;
        padding-bottom: 20px;
    }

    .navBar-title {
        font-size: 1.9rem;
    }

    .button {
        width: 100%;
    }

    .button,
    .projectFilter,
    .projectFiltersToggle {
        padding: 16px 18px;
        font-size: 0.98rem;
        box-shadow: 5px 5px 0 #000;
    }

    .navBar-burger,
    .navBar-close {
        width: 56px;
        height: 56px;
        box-shadow: 5px 5px 0 #000;
    }

    .heroContraint {
        align-items: flex-start;
        text-align: left;
    }

    .subtitle {
        max-width: none;
    }

    .projectCard-content,
    .legalCard {
        padding: 18px;
    }

    .contactPanel {
        padding: 18px;
        box-shadow: 6px 6px 0 #000;
    }

    .contactSubmit {
        align-self: stretch;
    }

    .siteFooter {
        margin-bottom: -20px;
    }

    .siteFooter-inner {
        padding-top: 32px;
        padding-bottom: 96px;
    }

    .siteFooter::after {
        min-height: 120px;
    }

    .siteFooter-title {
        max-width: 10ch;
    }

    .siteFooter-signature {
        right: -0.06em;
        bottom: 0.12em;
        font-size: clamp(3.6rem, 24vw, 6rem);
    }
}