/* Myrto Xoudis: component styles. Load after tokens.css. Type comes from the
   type-style classes in tokens.css (.opener, .title, .body, .meta ...);
   this file sets layout, case and colour only. Class prefix: mx-. */

body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; }

/* Layout helpers */
.mx-container { box-sizing: border-box; width: 100%; max-width: var(--page-max); margin-inline: auto; padding-inline: var(--space-4); }
@media (min-width: 720px) { .mx-container { padding-inline: var(--space-12); } }
.mx-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-8) var(--space-6); }
.mx-section { padding-block: var(--space-24); }
.mx-upper { text-transform: uppercase; }
.mx-muted { color: var(--ink-muted); }
.mx-link { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.mx-link:hover { color: var(--link); }
.mx-link:focus-visible, .mx-focus:focus-visible { outline: var(--border-focus) solid var(--focus); outline-offset: 2px; }

/* Logo */
.mx-logo { display: inline-block; color: inherit; line-height: 0; }
.mx-logo svg { display: block; overflow: visible; }
.mx-logo--wordmark { line-height: normal; text-transform: uppercase; white-space: nowrap; margin-right: -0.12em; }

/* SiteHeader */
.mx-header { background: var(--paper); color: var(--ink); }
.mx-header__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-6); padding-block: var(--space-6); }
.mx-header__home { display: inline-flex; align-items: center; gap: var(--space-3); color: inherit; text-decoration: none; padding-block: var(--space-1); }
.mx-header__nav ul { display: flex; flex-wrap: wrap; gap: 0 var(--space-6); margin: 0; padding: 0; list-style: none; }
.mx-header__nav a { display: inline-block; padding-block: var(--space-2); color: inherit; text-decoration: none; text-transform: uppercase; border-bottom: var(--border-hairline) solid transparent; }
.mx-header__nav a:hover { color: var(--link); }
.mx-header__nav a[aria-current="page"] { border-bottom-color: currentColor; }
.mx-header a:focus-visible { outline: var(--border-focus) solid var(--focus); outline-offset: 2px; }

/* Footer */
.mx-footer { background: var(--paper); color: var(--ink); border-top: var(--border-hairline) solid var(--rule); padding-block: var(--space-12); }
.mx-footer__inner { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-8) var(--space-6); }
.mx-footer__id { display: flex; flex-direction: column; gap: var(--space-4); }
.mx-footer__side { display: flex; flex-direction: column; gap: var(--space-3); align-items: flex-start; }
@media (min-width: 720px) { .mx-footer__side { align-items: flex-end; } }
.mx-footer__links { display: flex; flex-wrap: wrap; gap: 0 var(--space-6); margin: 0; padding: 0; list-style: none; }
.mx-footer__links a { display: inline-block; padding-block: var(--space-1); color: inherit; text-decoration: none; text-transform: uppercase; }
.mx-footer__links a:hover { color: var(--link); }
.mx-footer p { margin: 0; }
.mx-footer a:focus-visible { outline: var(--border-focus) solid var(--focus); outline-offset: 2px; }

/* ProjectOpener: always inside [data-theme="dark"] */
.mx-opener { background: var(--paper); color: var(--ink); padding-block: var(--space-16); }
@media (min-width: 720px) { .mx-opener { padding-block: var(--space-32); } }
.mx-opener__credit { margin: 0; text-transform: uppercase; max-width: 22ch; }
@media (max-width: 719px) { .mx-opener__credit.opener { font-size: 32px; line-height: 36px; } }
.mx-opener__title { margin: var(--space-16) 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-4); font-weight: inherit; }
.mx-opener__title .title { text-transform: uppercase; }
.mx-opener__title .meta { color: var(--ink-muted); text-transform: uppercase; }
.mx-opener__intro { margin: var(--space-6) 0 0; max-width: var(--measure); }

/* ProjectCard */
.mx-card { display: block; color: inherit; text-decoration: none; }
.mx-card__media { aspect-ratio: 4 / 5; overflow: hidden; background: var(--paper-2); }
.mx-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mx-card__title { margin: var(--space-3) 0 0; text-transform: uppercase; }
.mx-card .mx-meta { margin-top: var(--space-1); }
.mx-card:hover .mx-card__title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.mx-card:focus-visible { outline: var(--border-focus) solid var(--focus); outline-offset: 4px; }

/* Figure */
.mx-figure { margin: 0; }
.mx-figure__media { overflow: hidden; background: var(--paper-2); }
.mx-figure__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mx-figure--contain .mx-figure__media { background: var(--paper); }
.mx-figure--contain .mx-figure__media img { object-fit: contain; }
.mx-figure figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-1) var(--space-4); margin-top: var(--space-3); }
.mx-figure__credit { color: var(--ink-muted); text-transform: uppercase; }

/* Meta */
.mx-meta { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; text-transform: uppercase; }
.mx-meta li + li::before { content: "\00B7"; content: "\00B7" / ""; margin-inline: var(--space-2); }

/* Credits */
.mx-credits { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--space-2) var(--space-6); margin: 0; padding-top: var(--space-4); border-top: var(--border-hairline) solid var(--rule); }
.mx-credits dt { color: var(--ink-muted); text-transform: uppercase; padding-top: var(--space-1); }
.mx-credits dd { margin: 0; }
.mx-credits a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.mx-credits a:hover { color: var(--link); }

/* PrintTile */
.mx-print { margin: 0; }
.mx-print__swatch { aspect-ratio: 1 / 1; overflow: hidden; background: var(--paper-2); }
.mx-print__swatch img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mx-print figcaption { display: flex; flex-direction: column; gap: var(--space-1); margin-top: var(--space-3); }
.mx-print__name { text-transform: uppercase; }
.mx-print__note { color: var(--ink-muted); text-transform: uppercase; }

/* Palette */
.mx-palette { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-6); margin: 0; padding: 0; list-style: none; }
.mx-palette__item { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); }
.mx-palette--column { flex-direction: column; gap: var(--space-3); }
.mx-palette--column .mx-palette__item { flex-direction: row; align-items: center; gap: var(--space-3); }
.mx-palette__dot { box-sizing: border-box; width: 32px; height: 32px; border-radius: var(--radius-full); border: var(--border-hairline) solid var(--rule); }
.mx-palette__label { text-transform: uppercase; }
.mx-palette__label .mx-palette__hex { color: var(--ink-muted); }

/* Statement: the cobalt band */
.mx-statement { background: var(--cobalt); color: var(--on-cobalt); }
.mx-statement__inner { padding-block: var(--space-16); }
@media (min-width: 720px) { .mx-statement__inner { padding-block: var(--space-24); } }
.mx-statement__text { margin: 0; max-width: var(--measure); }
.mx-statement--center .mx-statement__text { margin-inline: auto; text-align: center; }
.mx-statement a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.mx-statement a:hover { text-decoration-thickness: 2px; }
.mx-statement a:focus-visible { outline: var(--border-focus) solid var(--on-cobalt); outline-offset: 2px; }

/* Button */
.mx-btn { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 var(--space-6); border: var(--border-hairline) solid var(--ink); border-radius: var(--radius-none); background: transparent; color: var(--ink); font-family: var(--font-sans); text-transform: uppercase; text-decoration: none; cursor: pointer; }
.mx-btn:hover { background: var(--ink); color: var(--paper); }
.mx-btn--solid { background: var(--ink); color: var(--paper); }
.mx-btn--solid:hover { background: transparent; color: var(--ink); }
.mx-btn:focus-visible { outline: var(--border-focus) solid var(--focus); outline-offset: 2px; }