/* kukudze site chrome: container, header, full menu, footer, generic page, 404. Mobile first. */

/* ---------- Layout ---------- */
/* Full width at every size (owner rule): no 1600px cap. Above 1440 the gutter grows to 96px at 2560
   and the display size to 112px; text blocks keep their own ch limits. */
.container { width: 100%; margin-inline: auto; padding-inline: var(--page-gutter); }
@media (min-width: 1441px) {
	:root {
		--page-gutter: clamp(64px, calc(64px + (100vw - 1440px) * 0.02857), 96px);
		--font-size-display: clamp(96px, calc(96px + (100vw - 1440px) * 0.01429), 112px);
	}
}
/* --page-section is the full distance between two sections: half above, half below. */
.section { padding-block: calc(var(--page-section) / 2); }
/* Swiss horizontal rule on top of a section, inside the gutters. */
.section--ruled { background: linear-gradient(var(--color-border), var(--color-border)) top center / calc(100% - 2 * var(--page-gutter)) 1px no-repeat; }

/* ---------- Background motif (shared) ----------
   kukudze's own shapes: thin signal arcs, fine lines and small square dots. Cobalt at very low opacity,
   CSS masks over local SVG files (no outside requests). Decorative only: no clicks, hidden in forced colors and print. */
.motif-host { position: relative; isolation: isolate; }
.motif-host::before { position: absolute; z-index: -1; pointer-events: none; background-color: var(--color-primary); opacity: 0.08; -webkit-mask: var(--motif) no-repeat center / contain; mask: var(--motif) no-repeat center / contain; }
@media (max-width: 767px) { .motif-host::before { opacity: 0.05; } }
@media (forced-colors: active), print { .motif-host::before { display: none; } }
/* Page heads: a short strip in the top right. On phones it is small and sits in the top padding, above the title. */
.page-head.motif-host::before { content: ""; top: var(--space-8); right: var(--page-gutter); width: 96px; aspect-ratio: 3 / 1; --motif: url("../img/motif-lines.svg"); }
@media (min-width: 768px) { .page-head.motif-host::before { top: var(--space-16); width: clamp(200px, 26vw, 440px); aspect-ratio: 480 / 400; --motif: url("../img/motif-arcs.svg"); } }

/* ---------- Logo: radar icon + "kukudze" (owner, 2026-11-03: no .com; radar icon kept; nothing moves on hover or focus, color only) ---------- */
.site-logo { display: inline-flex; align-items: center; gap: var(--space-8); flex: none; justify-self: start; width: max-content; /* link covers only the icon and name */ min-height: var(--layout-touch-target); color: var(--color-text); text-decoration: none; }
.site-logo .logo-icon { width: 32px; height: 32px; flex: none; }
.logo-name { font-family: var(--font-display); font-size: 26px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
/* Owner rule: the logo does nothing on hover (no color, underline or movement). Keyboard focus ring stays. */
.site-logo:hover, .site-logo:hover .logo-name { color: var(--color-text); text-decoration: none; }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: var(--layout-z-header); height: var(--header-height); background: var(--color-page); border-bottom: var(--border-thin) solid var(--color-border); }
.admin-bar .site-header { top: 46px; }
@media (min-width: 783px) { .admin-bar .site-header { top: 32px; } }
.site-header__inner { display: flex; align-items: center; gap: var(--space-16); height: 100%; }
.site-nav { display: none; }
.site-actions { display: none; align-items: center; gap: var(--space-12); margin-left: auto; }
.menu-toggle { margin-left: auto; color: var(--color-text); padding-inline: var(--space-12); }
.menu-toggle:hover { color: var(--color-text); }
/* Very small phones: an icon-only Menu button that keeps its name. */
@media (max-width: 359px) {
	.site-header__inner { gap: var(--space-8); }
	.menu-toggle, .menu-close { width: var(--layout-touch-target); padding: 0; }
	.menu-toggle span, .menu-close span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
.site-nav__list { display: flex; gap: var(--space-8); }
.site-nav__list a, .site-actions__signin { display: inline-flex; align-items: center; min-height: var(--layout-touch-target); padding-inline: var(--space-12); color: var(--color-text); font-weight: 500; text-decoration: none; }
.site-nav__list a:hover { color: var(--color-text); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.site-nav__list a[aria-current="page"], .site-actions__signin[aria-current="page"] { color: var(--color-primary); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.site-actions__signin { font-weight: 600; color: var(--color-link); }

@media (min-width: 768px) {
	.site-actions { display: flex; }
	.site-actions + .menu-toggle { margin-left: 0; }
}
/* No JavaScript: no menu button; the links wrap under the logo instead. */
.no-js .menu-toggle { display: none; }
@media (max-width: 1024px) {
	.no-js .site-header { height: auto; position: static; }
	.no-js .site-header__inner { flex-wrap: wrap; padding-block: var(--space-8); }
	.no-js .site-nav { display: block; width: 100%; }
	.no-js .site-nav__list { flex-wrap: wrap; margin-left: calc(-1 * var(--space-12)); }
	.no-js .site-actions { display: flex; margin-left: 0; }
}
@media (min-width: 1025px) {
	.site-header__inner { display: grid; grid-template-columns: 1fr auto 1fr; }
	.site-nav { display: block; }
	.site-actions { justify-self: end; margin-left: 0; padding-left: var(--space-24); border-left: var(--border-thin) solid var(--color-border); }
	.menu-toggle { display: none; }
}

/* ---------- Full menu (1024px and below) ---------- */
.menu-panel { position: fixed; inset: 0; z-index: var(--layout-z-menu); display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; background: var(--color-page); opacity: 0; transform: translateY(var(--motion-entry-offset)); transition: opacity var(--motion-fast) var(--motion-exit), transform var(--motion-fast) var(--motion-exit); }
.menu-panel.is-open { opacity: 1; transform: none; transition-duration: var(--motion-base); transition-timing-function: var(--motion-ease); }
.admin-bar .menu-panel { top: 46px; }
@media (min-width: 783px) { .admin-bar .menu-panel { top: 32px; } }
.menu-panel__bar { flex: none; height: var(--header-height); border-bottom: var(--border-thin) solid var(--color-border); }
.menu-close { margin-left: auto; color: var(--color-text); padding-inline: var(--space-12); }
.menu-close:hover { color: var(--color-text); }
.menu-panel__body { display: grid; gap: var(--space-32); padding-block: var(--space-24) var(--space-48); }
.menu-panel__list li { border-bottom: var(--border-thin) solid var(--color-border); }
.menu-panel__list a { display: flex; align-items: center; min-height: var(--layout-button-large); padding-block: var(--space-12); font-family: var(--font-display); font-size: var(--font-size-h3); font-weight: 700; letter-spacing: var(--letter-spacing-h3); line-height: var(--line-height-h3); color: var(--color-text); text-decoration: none; }
.menu-panel__list a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.menu-panel__list a[aria-current="page"] { color: var(--color-primary); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.menu-panel__actions { display: grid; gap: var(--space-12); }
@media (min-width: 768px) { .menu-panel__actions { grid-template-columns: repeat(2, max-content); } }
@media (min-width: 1025px) { .menu-panel { display: none; } }
html.menu-open { overflow: hidden; }

/* ---------- Footer ---------- */
.site-footer { border-top: var(--border-thin) solid var(--color-border); margin-top: auto; }
.site-footer__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-32) var(--page-gap); padding-block: var(--space-48) var(--space-32); }
.site-footer__brand { grid-column: 1 / -1; }
.site-footer__brand { display: grid; gap: var(--space-12); align-content: start; }
.site-footer__brand p { color: var(--color-text-muted); }
.site-footer__brand a:not(.site-logo) { display: inline-flex; align-items: center; min-height: var(--layout-touch-target); min-width: var(--layout-touch-target); }
.site-footer__title { font-family: var(--font-body); font-size: var(--font-size-label); font-weight: 600; letter-spacing: 0; line-height: var(--line-height-label); margin-bottom: var(--space-8); }
.site-footer__list a { display: inline-flex; align-items: center; min-height: var(--layout-touch-target); min-width: var(--layout-touch-target); color: var(--color-text); text-decoration: none; }
.site-footer__list a:hover { color: var(--color-primary); text-decoration: underline; }
.site-footer__list a[aria-current="page"] { color: var(--color-primary); text-decoration: underline; }
.site-footer__base { padding-block: var(--space-24); border-top: var(--border-thin) solid var(--color-border); color: var(--color-text-muted); background-clip: content-box; }
@media (min-width: 768px) {
	.site-footer__grid { grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr)); gap: var(--page-gap); padding-block: var(--space-64) var(--space-48); }
	.site-footer__brand { grid-column: auto; }
}

/* ---------- Generic page ---------- */
.page-head { padding-block: var(--page-section) var(--space-32); }
.page-head .container > * { position: relative; }
.page-head h1 { max-width: 24ch; }
.page-head .lead { margin-top: var(--space-24); max-width: 60ch; }
.page-body { padding-bottom: var(--page-section); }
.prose { max-width: 72ch; }
.prose > * + * { margin-top: var(--space-16); }
.prose h2, .prose h3, .prose h4 { margin-top: var(--space-40); }
.prose ul, .prose ol { padding-left: 1.25em; }
.prose li + li { margin-top: var(--space-8); }

/* ---------- 404 ---------- */
.page-head--404 { padding-block: var(--page-section); }
.page-head--404 .code { margin-bottom: var(--space-16); }
.page-head--404 .hero__actions { margin-top: var(--space-32); }

/* ---------- Shared action row ---------- */
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-12); }
@media (max-width: 767px) { .hero__actions .btn { width: 100%; } }

/* ---------- No-JS helpers ---------- */
.js .nojs-only { display: none !important; }
.no-js .js-only { display: none !important; }

/* LinkedIn link with its icon (footer, contact, about). Color change only, nothing moves. */
.site-footer__social, .contact__social a, .side-box a[href*="linkedin"] { display: inline-flex; align-items: center; gap: var(--space-8); min-height: 44px; }
.site-footer__social svg, .contact__social svg, .side-box a[href*="linkedin"] svg { width: 20px; height: 20px; flex: none; }