@charset "utf-8";

/* ------------------------------
   FONT FACE DECLARATIONS
------------------------------ */

@font-face {
    font-family: 'Dazzed';
    src: local('☺'),
        url("../fonts/Dazzed-Thin.woff2") format("woff2"),
        url("../fonts/Dazzed-Thin.woff") format("woff"),
        url("../fonts/Dazzed-Thin.ttf") format("truetype");
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: 'Dazzed';
    src: local('☺'),
        url("../fonts/Dazzed-ThinItalic.woff2") format("woff2"),
        url("../fonts/Dazzed-ThinItalic.woff") format("woff"),
        url("../fonts/Dazzed-ThinItalic.ttf") format("truetype");
    font-weight: 200;
    font-style: italic;
}

@font-face {
    font-family: 'Dazzed';
    src: local('☺'),
        url("../fonts/Dazzed-Light.woff2") format("woff2"),
        url("../fonts/Dazzed-Light.woff") format("woff"),
        url("../fonts/Dazzed-Light.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
}



@font-face {
    font-family: 'Dazzed';
    src: local('☺'),
        url("../fonts/Dazzed-LightItalic.woff2") format("woff2"),
        url("../fonts/Dazzed-LightItalic.woff") format("woff"),
        url("../fonts/Dazzed-LightItalic.ttf") format("truetype");
    font-weight: 400;
    font-style: italic;
}


@font-face {
    font-family: 'RTNLsansTW';
    src: local('☺'),
        url('../fonts/RTNLsansTW-light.woff2') format('woff2'),
        url('../fonts/RTNLsansTW-light.woff2') format('woff');
    font-weight: 400;
    /*light*/
    font-style: normal;
}

@font-face {
    font-family: 'RTNLsansTW';
    src: local('☺'),
        url('../fonts/RTNLsansTW-light_italic.woff2') format('woff2'),
        url('../fonts/RTNLsansTW-light_italic.woff2') format('woff');
    font-weight: 400;
    /*light*/
    font-style: italic;
}


@font-face {
    font-family: 'RTNLsansTW';
    src: local('☺'),
        url('../fonts/RTNLsansTW-extralight.woff2') format('woff2'),
        url('../fonts/RTNLsansTW-extralight.woff2') format('woff');
    font-weight: 300;
    /*light*/
    font-style: normal;
}

@font-face {
    font-family: 'RTNLsansTW';
    src: local('☺'),
        url('../fonts/RTNLsansTW-extralight_italic.woff2') format('woff2'),
        url('../fonts/RTNLsansTW-extralight_italic.woff2') format('woff');
    font-weight: 300;
    /*light*/
    font-style: italic;
}



@font-face {
    font-family: 'RTNLsansTW';
    src: local('☺'),
        url('../fonts/RTNLsansTW-thin.woff2') format('woff2'),
        url('../fonts/RTNLsansTW-thin.woff2') format('woff');
    font-weight: 200;
    /*thin*/
    font-style: normal;
}

@font-face {
    font-family: 'RTNLsansTW';
    src: local('☺'),
        url('../fonts/RTNLsansTW-thin_italic.woff2') format('woff2'),
        url('../fonts/RTNLsansTW-thin_italic.woff2') format('woff');
    font-weight: 200;
    /*thin*/
    font-style: italic;
}



/* ------------------------------
   CSS VARIABLES
------------------------------ */

:root {
    /* Font groups */
    --font-family-sans: 'Dazzed', 'Helvetica Neue', Helvetica, sans-serif;
    --font-family-sansTW: 'RTNLsansTW', 'Helvetica Neue', Helvetica, sans-serif;

    /* Font Weights */
    --font-weight-hairline: 100;
    --font-weight-thin: 200;
    --font-weight-xlight: 300;
    --font-weight-light: 400;
    --font-weight-regular: 500;
    /*book*/
    --font-weight-medium: 600;
    --font-weight-semibold: 700;
    --font-weight-bold: 800;
    --font-weight-xbold: 900;

    /* Variable font axes */
    --font-slant-upright: 0;
    --font-slant-subtle: -6;
    --font-slant-normal: -12;
    --font-slant-extreme: -18;

    /* Font animation */
    --font-transition-duration: 250ms;
    --font-transition-easing: ease;

    /* Font Styles */
    --font-style-normal: normal;
    --font-style-italic: italic;

    /* Font sizing */
    --font-size-xsmall: calc(7.5px + 0.390625vw);
    --font-size-small: calc(9.5px + 0.390625vw);
    --font-size-regular: calc(12px + 0.390625vw);
    --font-size-medium: calc(15px + 0.390625vw);

    /* Font spacing */
    --letter-spacing-tight: -0.15em;
    --letter-spacing-loose: +0.01em;

    /* Line height */
    --line-height-tight: 1.2;
    --line-height-normal: 1.4;
    --line-height-loose: 1.75;

    /* Space */
    --space-xxxbig: 40px;
    --space-xxbig: 30px;
    --space-xbig: 20px;
    --space-big: 16px;
    --space-medium: 13px;
    --space-regular: 10px;
    --space-small: 7.5px;
    --space-xsmall: 5px;
    --space-xxsmall: 2.5px;

    /* Colors (fallback defaults) */
    --main-color: #000000;
    --accent-color: #0000ff;
    --background-color: #ffffff;
    --background-accentcolor: #bbbbff;
    --color-text: var(--main-color);

    /* Layout */
    --line-thickness: 0.01em;
    --underline-thickness: 0.01em;
    --underline-offset: 0.08em;

    --header-fontsize: var(--font-size-medium);

    --grid-columns: 12;
    --content-grid-columns: 12;
    --grid-gap: var(--space-regular);
    --page-padding: var(--space-regular);
}

/* ------------------------------
   BASE ELEMENTS
------------------------------ */

*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    margin: 0;
    padding: 0;
}

html {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
    color: var(--color-text);
    background: var(--background-color);
    font-size: 62.5%;
    scroll-behavior: smooth;
}

body {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
    font-family: var(--font-family-sans);
    font-weight: var(--font-weight-light);
    font-style: var(--font-style-normal);
    font-size: var(--font-size-regular);
    line-height: var(--line-height-normal);
    font-variant-ligatures: common-ligatures;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    hyphens: auto;
}

button,
input,
textarea,
select {
    font: inherit;
}

hr {
    border-width: var(--line-thickness);
}


/* ------------------------------
   TYPOGRAPHY
------------------------------ */


h1,
h2,
h3,
h4 {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    font-style: inherit;
}

p {
    margin-bottom: var(--space-medium);
}

strong,
b {
    font-variant: small-caps;
    text-transform: lowercase;
    font-family: inherit;
    font-weight: inherit;
}

em,
i {
    font-style: var(--font-style-italic);
}

li {
    list-style: none;
    padding: 0;
    margin: 0;
}

dl,
dt,
dd {
    margin: 0;
    padding: 0;
}

/* ------------------------------
   LINKS
------------------------------ */

a,
a:link,
a:visited {
    color: currentColor;
    text-decoration: none;
}

.content-toggle__body a,
.about-page a {
    text-decoration: underline;
    text-decoration-thickness: var(--underline-thickness);
    text-underline-offset: var(--underline-offset);
}


/* Keyboard focus */

a:active,
a.active {
    color: currentColor;
}

/* General keyboard focus */
:where(a, button, summary, [tabindex]):focus {
    outline: none;
}

:where(a, button, summary, [tabindex]):focus-visible {
    outline: 0.1em dotted var(--accent-color);
    outline-offset: var(--space-tiny);

}

/* Avoid an outline around the fullscreen lightbox viewport */
.media-lightbox__stage:focus-visible {
    outline: none;
}

/* Optional mobile tap-flash removal */
button,
a {
    -webkit-tap-highlight-color: transparent;
}

.monotype {
    font-family: var(--font-family-sansTW);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-xlight);
}

.underline {
    text-decoration: underline;
    text-decoration-thickness: var(--underline-thickness);
    text-underline-offset: var(--underline-offset);
}

/* ------------------------------
   COLLAPSIBLE CONTENT FIELDS
------------------------------ */

.content-toggle {
    min-width: 0;
}

/* Remove browser disclosure triangle */
.content-toggle__header {
    display: flex;
    align-items: baseline;
    width: 100%;
    min-width: 0;

    cursor: pointer;
    list-style: none;

    text-transform: uppercase;
}

/* Safari */
.content-toggle__header::-webkit-details-marker {
    display: none;
}

.content-toggle__title {
    flex: 0 0 auto;
    margin: 0;

    font: inherit;
    text-decoration: underline;
    text-decoration-thickness: var(--underline-thickness);
    text-underline-offset: var(--underline-offset);
}

.content-toggle__symbol {
    flex: 0 0 auto;
    letter-spacing: var(--letter-spacing-tight);
}

/* Expanded by default */
.content-toggle__symbol::before {
    content: "[-]";
}

/* Collapsed */
.content-toggle:not([open]) .content-toggle__symbol::before {
    content: "[+]";
}



/* ------------------------------
   HEADER + NAV
------------------------------ */


.site-header,
.page-header,
.site-footer {
    font-size: var(--header-fontsize);
    background: var(--background-color);
}


/* ------------------------------
   SITE HEADER (&Footer)
------------------------------ */

.site-header {
    position: sticky;
    top: 0;

    z-index: 20;

    display: grid;
    grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
    align-items: baseline;
    column-gap: var(--grid-gap);

    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: var(--page-padding) var(--page-padding) 0 var(--page-padding);
}

.site-header__primary,
.site-header__secondary {
    align-items: baseline;
    min-width: 0;
}

.site-header__primary {
    grid-column: 1 / -1;
    display: flex;
}

.site-header__secondary {
    display: none;
}

.site-header__primary>a,
.site-header__secondary>a {
    flex: 0 0 auto;
}

.site-header a {
    color: currentColor;
    text-decoration: none;
}

.site-footer a,
.site-header__secondary,
.site-header__primary a:not(:first-child) {
    text-transform: lowercase;
}

.site-footer a:hover span,
.site-header a:hover span {
    font-style: var(--font-style-italic);
    text-decoration: underline;
    text-decoration-thickness: var(--underline-thickness);
    text-underline-offset: var(--underline-offset);
}

.site-header a.active span,
.site-header a[aria-current="page"] span {
    text-decoration: underline;
    text-decoration-thickness: var(--underline-thickness);
    text-underline-offset: var(--underline-offset);
}

.bracketed::before,
.bracketed::before {
    content: "(";
    font-family: var(--font-family-sans);
    font-style: var(--font-style-italic);
    font-weight: var(--font-weight-thin);
    margin-right: -0.25em;
}

.bracketed::after,
.bracketed::after {
    content: ")";
    font-family: var(--font-family-sans);
    font-style: var(--font-style-italic);
    font-weight: var(--font-weight-thin);
    margin-left: -0.25em;
}


/*FOOTER*/

.site-footer {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding: var(--page-padding);
    margin-top: 5rem;
}

.site-footer hr {
    width: 100%;
}


/* ------------------------------
   PAGE HEADER
------------------------------ */
.page-header {
    position: sticky;
    top: 0;
    z-index: 30;

    grid-column: 1 / -1;

    display: grid;
    grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
    align-items: baseline;
    column-gap: var(--grid-gap);

    min-width: 0;
    padding: var(--page-padding) 0 0 0;

    background: var(--background-color);
}

/*
 * Title and first line occupy the first eleven columns.
 */
.page-header__primary {
    grid-column: 1 / 12;
    grid-row: 1;

    display: flex;
    align-items: baseline;
    min-width: 0;
}

/*
 * Remove the secondary wrapper from mobile layout,
 * allowing its children to use the page-header grid.
 */
.page-header__secondary {
    display: contents;
}

.page-header__title {
    text-decoration: underline;
    text-decoration-thickness: var(--underline-thickness);
    text-underline-offset: var(--underline-offset);
    text-transform: lowercase;
}

.content-page .page-header__title {
    text-transform: none;
}

.page-header__subtitle {
    font-size: var(--font-size-regular);
}

.page-header__title,
.page-header__subtitle,
.page-header__close {
    flex: 0 0 auto;
}

/* Close button in the final grid column */
.page-header__close {
    grid-column: 12 / 13;
    grid-row: 1;

    justify-self: end;
}

a.page-header__close {
    text-decoration: none;
}

/* Year beneath the title */
.page-header__subtitle {
    grid-column: 1 / 12;
    grid-row: 2;
}

/* No second line on mobile */
.page-header__secondary-line {
    display: none;
}

.media-lightbox__close::before,
.page-header__close::before {
    content: "[×]";
    font-family: var(--font-family-sansTW);
    font-weight: var(--font-weight-thin);
    letter-spacing: var(--letter-spacing-tight);
}


.interface-line {
    flex: 1 1 auto;
    min-width: 1rem;
    overflow: hidden;
    white-space: nowrap;

    text-decoration: underline;
    text-decoration-thickness: var(--underline-thickness);
    text-underline-offset: var(--underline-offset);
}


.interface-line::before {
    content: "\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0"
        "\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0"
        "\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0"
        "\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0"
        "\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0"
        "\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0"
        "\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0"
        "\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0"
        "\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0"
        "\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0"
        "\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0"
        "\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0"
        "\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0"
        "\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0"
        "\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0"
        "\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0"
        "\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0"
        "\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0"
        "\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0"
        "\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0"
        "\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0"
        "\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0"
        "\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0"
        "\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0"
        "\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0"
        "\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0"
        "\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0"
        "\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0"
        "\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0"
        "\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0"
        "\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0"
        "\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0"
        "\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0"
        "\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0"
        "\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0"
        "\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0"
        "\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0"
        "\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0"
        "\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0";
}

/* ------------------------------
   MAIN
------------------------------ */

main {
    display: grid;
    grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
    gap: var(--grid-gap);

    padding: 0 var(--page-padding) var(--page-padding);
}


/* ------------------------------
   EDITORIAL GALLERY GRID
------------------------------ */

.editorial-gallery {
    row-gap: var(--grid-gap);
}

.editorial-gallery__item {
    display: block;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}

.editorial-gallery__item img,
.editorial-gallery__item video {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
}

.editorial-gallery__item--xxsmall {
    grid-column: span 2;
}

.editorial-gallery__item--xsmall {
    grid-column: span 3;
}

.editorial-gallery__item--small {
    grid-column: span 4;
}

.editorial-gallery__item--regular {
    grid-column: span 5;
}

.editorial-gallery__item--medium {
    grid-column: span 6;
}

.editorial-gallery__item--large {
    grid-column: span 8;
}

.editorial-gallery__item--wide {
    grid-column: span 10;
}

.editorial-gallery__item--full {
    grid-column: span 12;
}

.editorial-gallery__caption {
    text-align: right;
    padding-left: 20%;
}

/* ------------------------------
   SECTION SLIDESHOW
------------------------------ */
.section-slideshow {
    position: relative;
    min-width: 0;
}

.section-slideshow__trigger {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;

    color: currentColor;
    background: transparent;
    text-align: inherit;

    cursor: pointer;
}

.section-slideshow__slide {
    width: 100%;
    min-width: 0;
}

.section-slideshow__slide[hidden] {
    display: none;
}

.section-slideshow__slide img,
.section-slideshow__slide video {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;

    aspect-ratio: 3 / 2;
    object-fit: cover;
}

.section-slideshow__caption {
    margin-top: var(--space-small);
}

.section-slideshow__counter {
    position: absolute;
    top: var(--space-small);
    right: var(--space-small);
    z-index: 1;

    letter-spacing: var(--letter-spacing-tight);
    pointer-events: none;
}

/* ------------------------------
   ABOUT-PAGE LAYOUT
------------------------------ */


.about-page__columns {
    grid-column: 1 / -1;

    display: flex;
    flex-direction: column;
    gap: var(--grid-gap);
}

.about-page__left,
.about-page__right {
    display: contents;
}

.about-page__media {
    order: 1;
}

.about-page__about {
    order: 2;
}

.about-page__bio {
    order: 3;
}

.about-page__contact {
    order: 4;
}

.about-page__support {
    order: 5;
}

.about-page__activities {
    grid-column: 1 / -1;
    order: 6;

    display: flex;
    flex-direction: column;
    gap: var(--grid-gap);
}

.about-page__imprint {
    order: 7;
}

.about-page__logo-link {
    display: block;
    width: 100%;
    text-decoration: none;
}

.about-page__logos {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--grid-gap);
    align-items: center;
    padding-top: var(--space-small);
}

.about-page__logos img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: contain;
    object-position: left center;
}



/* ------------------------------
   CONTENT-PAGES LAYOUT
------------------------------ */

.quote::before {
    content: "»";
}

.quote::after {
    content: "«";
}

/*
 * MOBILE / DEFAULT
 *
 * The page sections are reordered independently.
 * Left and right wrappers disappear from layout.
 */
.content-page__columns {
    grid-column: 1 / -1;

    display: flex;
    flex-direction: column;
    gap: var(--grid-gap);
}

.content-page__left,
.content-page__right {
    display: contents;
}

/*
 * Cover and gallery each have their own
 * 12-column grid on mobile.
 */
.content-page__cover,
.content-page__gallery {
    display: grid;
    grid-template-columns: repeat(var(--content-grid-columns), minmax(0, 1fr));
    gap: var(--grid-gap);
    align-items: start;
    min-width: 0;
}



/*
 * Mobile cover is always full width,
 * regardless of its gallerySize setting.
 */
.content-page__cover .editorial-gallery__item {
    grid-column: 1 / -1;
}

/*
 * Mobile order:
 * cover
 * about
 * gallery
 * credits
 * related
 */
.content-page__cover {
    order: 1;
}

.content-page__about {
    order: 2;
}

.content-page__gallery {
    order: 3;
}

.content-page__credits {
    order: 4;
}

.content-page__related {
    order: 5;
}

.related-pages__item::before {
    content: "\2192";

    font-family: 'RTNLsansTW';
}

/* Brackets */

.tags {
    font-size: var(--font-size-xsmall);
    line-height: var(--line-height-tight);
}

.tag {
    white-space: nowrap;
    letter-spacing: var(--letter-spacing-loose);
}

.tag::before {
    content: "(";
    font-style: oblique;
}

.tag::after {
    content: ")";
    font-style: oblique;
}

/* ------------------------------
   WORKS PAGE
------------------------------ */

.works-index {
    grid-column: 1 / -1;

    display: grid;
    grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
    gap: var(--grid-gap);
}

.works-index__item {
    grid-column: 1 / -1;
    min-width: 0;
}

.works-index__link {
    display: block;
    text-decoration: none;
}

.works-index__figure {
    aspect-ratio: 4 / 2.5;
    overflow: hidden;
}

.works-index__figure img,
.works-index__figure video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.works-index__info {
    height: 100%;
    border-top: var(--line-thickness) solid var(--main-color);
    border-bottom: var(--line-thickness) solid var(--main-color);
    padding-top: var(--space-small);
    padding-bottom: var(--space-small);

}

.works-index__heading {
    display: block;
}

.works-index__title {
    font-size: var(--header-fontsize);
}

.works-index__subtitle {
    margin-bottom: var(--space-tiny);
}

.works-index__tags {
    display: none;
}

/* ------------------------------
   LIGHTBOX
------------------------------ */

.lightbox-trigger {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;

    color: currentColor;
    background: transparent;
    text-align: inherit;
    cursor: zoom-in;
}

.lightbox-trigger img,
.lightbox-trigger video {
    display: block;
    width: 100%;
    height: auto;
}

.media-lightbox {
    width: 100vw;
    max-width: none;
    height: 100dvh;
    max-height: none;

    padding: var(--page-padding);
    border: 0;

    color: var(--main-color);
    background: var(--background-color);
}

.media-lightbox::backdrop {
    background: var(--background-color);
}

.media-lightbox__stage {
    display: grid;
    place-items: center;

    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;

    color: currentColor;
    background: transparent;
    cursor: e-resize;
}

.media-lightbox__slide {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;

    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
}

.media-lightbox__slide[hidden] {
    display: none;
}

.media-lightbox__slide> :first-child {
    place-self: center;
}

.media-lightbox__slide img,
.media-lightbox__slide video {
    display: block;

    width: auto;
    max-width: 100%;
    height: auto;
    max-height: calc(100dvh - 8rem);

    object-fit: contain;
}

.media-lightbox__caption {
    justify-self: stretch;
    align-self: start;

    display: flex;
    flex-direction: column;

    width: 100%;
    height: 5rem;
    background-color: var(--background-color);
    margin-top: var(--space-medium);
    text-align: left;
}

.media-lightbox__caption-content {
    display: flex;
    align-items: flex-start;
    gap: var(--space-small);
    min-width: 0;
}

.media-lightbox__counter {
    flex: 0 0 auto;
}

.media-lightbox__caption-text p,
.media-lightbox__credit p {
    margin: var(--space-tiny);
}




.media-lightbox__close {
    position: fixed;
    top: var(--page-padding);
    right: var(--page-padding);
    z-index: 2;

    padding: 0;
    border: 0;

    color: currentColor;
    background: transparent;
    font: inherit;
    cursor: pointer;
}

body:has(.media-lightbox[open]) {
    overflow: hidden;
}

/* ------------------------------
   BEYOND PAGE
------------------------------ */

.beyond-page__introduction,
.beyond-sections {
    grid-column: 1 / -1;
}

.beyond-page__introduction {
    margin-bottom: var(--grid-gap);
}

.beyond-sections {
    display: flex;
    flex-direction: column;
}

.beyond-section {
    border-top:
        var(--line-thickness) solid var(--main-color);
}

.beyond-section:last-child {
    border-bottom:
        var(--line-thickness) solid var(--main-color);
}

.beyond-section__layout {
    display: block;
}

.beyond-section__media {
    width: 100%;
    min-width: 0;
}

.beyond-section__info {
    padding-block: var(--space-small);
}

.beyond-section__text {
    padding-top: var(--space-small);
}

/* --------------------------------
   IMPRINT-page
-------------------------------- */

.imprint-page__columns {
    grid-column: 1 / -1;

    display: flex;
    flex-direction: column;
    gap: var(--grid-gap);
}

.imprint-page__columns .content-toggle__body b,
.imprint-page__columns .content-toggle__body strong {
    font-family: var(--font-family-sansTW);
    font-variant: normal;
    font-weight: var(--font-weight-thin);
    text-transform: none;
    font-size: inherit;
}




/* --------------------------------
   MOBILE / NARROW
   default: 0–767px
-------------------------------- */
/* my default */

/* --------------------------------
   TABLET / MEDIUM
   768–1000px
-------------------------------- */
@media (width >=768px) {

    :root {
        --grid-gap: var(--space-medium);
        --page-padding: var(--space-medium);

        /* Font sizing */
        --font-size-xsmall: calc(8.5px + 0.390625vw);
        --font-size-small: calc(8.5px + 0.390625vw);
        --font-size-regular: calc(12px + 0.390625vw);
        --font-size-medium: calc(15px + 0.390625vw);
    }

    /* Global 12-column page grid.*/
    .content-page__columns {
        display: grid;
        grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
        gap: var(--grid-gap);
        align-items: start;
    }

    /* Left side occupies global columns 1–4 */
    .content-page__left {
        grid-column: 1 / 5;

        display: flex;
        flex-direction: column;
        gap: var(--grid-gap);

        min-width: 0;
    }

    /* Right side occupies global columns 5–end but makes it 9 columns. */
    .content-page__right {
        grid-column: 5 / -1;

        display: grid;
        grid-template-columns: repeat(var(--content-grid-columns), minmax(0, 1fr));

        gap: var(--grid-gap);
        align-items: start;
        min-width: 0;
    }

    /*
     * Remove the cover/gallery wrappers from grid layout.
     * Their figures now participate directly in the
     * right-hand 8-column subgrid.
     */
    .content-page__cover,
    .content-page__gallery {
        display: contents;
    }

    /* Alternative cover is mobile-only. */
    .content-page__cover--alternative {
        display: none;
    }

    /*
     * On desktop the cover no longer has to be full width.
     * Restore its Panel-defined gallerySize just like
     * all other editorial gallery images.
     */
    .content-page__right .editorial-gallery__item--xsmall {
        grid-column: span 3;
    }

    .content-page__right .editorial-gallery__item--small {
        grid-column: span 4;
    }

    .content-page__right .editorial-gallery__item--regular {
        grid-column: span 5;
    }

    .content-page__right .editorial-gallery__item--medium {
        grid-column: span 6;
    }

    .content-page__right .editorial-gallery__item--large {
        grid-column: span 8;
    }

    .content-page__right .editorial-gallery__item--wide {
        grid-column: span 10;
    }

    .content-page__right .editorial-gallery__item--full {
        grid-column: span 12;
    }




    /* ------------------------------
       WORKS PAGE
    ------------------------------ */
    .works-index__item {
        grid-column: 1 / -1;
    }

    .works-index__link {
        display: grid;
        grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
        column-gap: var(--grid-gap);
        align-items: start;
    }

    .works-index__figure {
        grid-column: 1 / 5;
    }

    .works-index__info {
        grid-column: 5 / -1;
        padding-top: var(--space-big);

    }

    .works-index__tags {
        display: block;
        width: 40%;
    }


    /* ------------------------------
       ABOUT PAGE
    ------------------------------ */


    .about-page__columns {
        display: grid;
        grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
        column-gap: var(--grid-gap);
        align-items: start;
    }

    .about-page__left {
        grid-column: 1 / 7;

        display: flex;
        flex-direction: column;
        gap: var(--grid-gap);
        min-width: 0;
    }

    .about-page__right {
        grid-column: 7 / -1;

        display: grid;
        grid-template-columns: subgrid;
        gap: var(--grid-gap);
        min-width: 0;
    }

    .about-page__media,
    .about-page__support,
    .about-page__activities {
        grid-column: 1 / -1;
    }



    /* ------------------------------
       Beyond PAGE
    ------------------------------ */
    .beyond-section__layout {
        display: grid;

        grid-template-columns:
            repeat(var(--grid-columns), minmax(0, 1fr));

        column-gap: var(--grid-gap);
        align-items: start;
    }

    .beyond-section__media {
        grid-column: 1 / 5;
    }

    .beyond-section__info {
        grid-column: 5 / -1;

        height: 100%;
        padding-block: var(--space-big);
    }

    /* ------------------------------
       Imprint PAGE
    ------------------------------ */


    .imprint-page__columns {
        display: grid;
        grid-template-columns:
            repeat(var(--grid-columns), minmax(0, 1fr));
        gap: var(--grid-gap);
    }

    .imprint-page__credit,
    .imprint-page__contact,
    .imprint-page__imprint,
    .imprint-page__copyright {
        grid-column: 1 / 5;
    }



}


/* --------------------------------
   DESKTOP / WIDE
   1000px+
-------------------------------- */

@media (width >=1000px) {

    :root {
        --grid-gap: var(--space-big);
        --page-padding: var(--space-big);
    }


    /* ------------------------------
       PAGE HEADER
    ------------------------------ */

    .page-header__primary {
        grid-column: 1 / 5;
        grid-row: 1;
    }

    .page-header__secondary {
        grid-column: 5 / -1;
        grid-row: 1;

        display: flex;
        align-items: baseline;
        min-width: 0;
    }

    .page-header__subtitle {
        text-decoration: underline;
        text-decoration-thickness: var(--underline-thickness);
        text-underline-offset: var(--underline-offset);
    }

    .page-header__subtitle,
    .page-header__close {
        flex: 0 0 auto;
    }

    .page-header__secondary-line {
        display: block;
    }
}


/* --------------------------------
   Desktop LARGE
-------------------------------- */

@media (width >=1200px) {
    /* spacing/type refinements only */

    :root {
        --grid-columns: 14;
        --content-grid-columns: 16;
        --grid-gap: var(--space-xbig);
        --page-padding: var(--space-xbig);
    }


    .site-header__primary {
        grid-column: 1 / 13;
    }

    .site-header__secondary {
        grid-column: 13 / -1;
        display: flex;
    }
}




/* --------------------------------
   Desktop VERY LARGE
-------------------------------- */

@media (width >=1400px) {
    /* spacing/type refinements only */

    :root {
        --grid-columns: 16;
    }


    .site-header__primary {
        grid-column: 1 / 14;
    }

    .site-header__secondary {
        grid-column: 14 / -1;
        display: flex;
    }

    .about-page__media,
    .about-page__support,
    .about-page__activities {
        grid-column: span 7;
    }
}