/*!
 * abustillos.art (2026)
 * author: @atonahuali
 * version 2.0 -- last updated: 2026-02-03
 */

/* fonts */
@import url('https://fonts.cdnfonts.com/css/br-cobane');

:root {
    
    /* fonts */
    --txt-font-p: Optima;
    --txt-font-h: BR Cobane;
    -webkit-font-smoothing: antialiased;
    
    /* fallback font for old browsers */
    font-family: sans-serif;

    /* standard units */
    --nbar-width:   clamp(148px, 16vw, 200px);
    --tbar-btn:     clamp(24px, 2.4vmin, 32px);
    --tbar-width:   calc(var(--tbar-btn) + (var(--padding-M) * 2));
    --menu-collapsed-gallery-w: calc(100vw - (var(--tbar-width) + (var(--padding-L) * 2)));
    --menu-expanded-gallery-w: calc(100vw - (var(--nbar-width) + var(--padding-XL) + var(--tbar-width) + (var(--padding-L) * 2)));
    
    --card-padding: clamp(16px, 3.2vw, 32px);
    --card-img-S:   clamp(114px, 16vw, 228px);
    --card-img-M:   clamp(114px, 22vw, 300px);
    --card-img-L:   clamp(114px, 26vw, 370px);
    --card-img-v:   calc(100vw - (var(--padding-L) * 2));
    --card-text-p:  clamp(14px, 2.4vw, 19px);
    --card-text-pw: clamp(16px, 4vw, 19px);
    --card-text-pp: clamp(14px, 1.6vw, 18px);
    --card-text-h:  clamp(14px, 2.4vw, 24px);
    --card-text-hw: clamp(16px, 6.4vw, 24px);
    --card-text-hh: clamp(14px, 2.4vw, 22px);

    --padding-S:    clamp(8px, 1.6vw, 32px);
    --padding-M:    clamp(8px, 4vmin, 32px);
    --padding-L:    clamp(16px, 2vw, 48px);
    --padding-XL:   clamp(24px, 4vw, 48px);
    --padding-XXL:  clamp(48px, 8vmin, 72px);
    
    --text-S:       clamp(11px, 3.2vmin, 16px);
    --text-L:       clamp(16px, 4vw, 24px);
    --text-XL:      clamp(16px, 6.4vw, 32px);
    --text-vh-M:    clamp(14px, 3.2vh, 26px);
    --text-vh-L:    clamp(16px, 4vh, 26px);
    --text-vh-XL:   clamp(16px, 4.8vh, 32px);
    
    /* data */
/*    --theme: light;*/
    
    /* themes */
    --light-bg-main: #f8f8f8;
    --light-bg-alt: #f0f0f0;
    --light-bg-alt-alpha: #f0f0f0de;
    --light-txt-main: #202020;
    --light-txt-fade: #ababab;
    --light-txt-muted: #777777;
    --light-accent: #000000;
    --light-mid-color: #999999;
    --light-paper: #ffffff;
    --light-shadow: #555555;

    --dark-bg-main: #202020;
    --dark-bg-alt: #101010;
    --dark-bg-alt-alpha: #101010de;
    --dark-txt-main: #ababab;
    --dark-txt-fade: #555555;
    --dark-txt-muted: #777777;
    --dark-accent: #ffffff;
    --dark-mid-color: #999999;
    --dark-paper: #101010;
    --dark-shadow: #101010;

    /* theme variables, default (light) */
    --color-bg: var(--light-bg-main);
    --color-bg-alt: var(--light-bg-alt);
    --color-bg-alt-alpha: var(--light-bg-alt-alpha);
    --color-txt: var(--light-txt-main);
    --color-txt-menu: var(--light-txt-main);
    --color-accent: var(--light-accent);
    --color-fade: var(--light-txt-fade);
    --color-muted: var(--light-txt-muted);
    --color-paper: var(--light-paper);
    --color-shadow: var(--light-shadow);
  
}

/* map dark when data-theme="dark" */
:root[data-theme="dark"] {
    --color-bg: var(--dark-bg-main);
    --color-bg-alt: var(--dark-bg-alt);
    --color-bg-alt-alpha: var(--dark-bg-alt-alpha);
    --color-txt: var(--dark-txt-main);
    --color-txt-menu: var(--dark-txt-main);
    --color-accent: var(--dark-accent);
    --color-fade: var(--dark-txt-fade);
    --color-muted: var(--dark-txt-muted);
    --color-paper: var(--dark-paper);
    --color-shadow: var(--dark-shadow);
}

/* user agent reset */
html, body {
    width: 100%;
    margin: 0;
}
h1, h2, h3, h4, h5, h6, p, ul, ol, li {
    font-weight: normal;
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0;
    margin-inline-end: 0;
}
figure {
    margin: 0;
    padding: 0;
}
button {
    -webkit-appearance: none;
    padding: 0;
    border: 0;
    background: transparent;
}

/* typography */
h1, h2, h3, h4, h5, h6,
nav li {
    font-family: var(--txt-font-h);
}
p,
article ol {
    font-family: var(--txt-font-p);
}
h1 {
    font-size: 26px;
    line-height: 32px;
}
h2,
p,
li {
    font-size: 16px;
    line-height: 24px;
}
h3, h4 {
    font-size: 14px;
    line-height: 19px;
}
strong {
    font-weight: 600;
    color: var(--color-accent);
}
em {
    font-style: normal;
    font-weight: 600;
    color: var(--color-accent);
}
b {
    font-weight: 600;
}
i {
    font-style: italic;
}
.ab-navbar h3 {
    color: var(--color-muted);
}

/* links */
a,
a:visited {
    text-decoration: none;
    color: inherit;
    outline: none;
}
a:hover {
    color: var(--color-accent);
    font-weight: 600;
    text-decoration: underline;
    outline: none;
}
.ab-gallery a:hover {
    text-decoration: none;
}
.ab-gallery a:hover .ab-card {
    background-color: var(--color-bg);
    border-color: var(--color-accent);
    box-shadow: -2px 4px 5px var(--color-muted);
}
.ab-gallery a:hover .ab-card-icon {
    border-color: var(--color-accent);
}
.ab-gallery a:hover .ab-card-synopsis {
    color: var(--color-accent);
}
.ab-collection a, 
.ab-collection a:hover {
    text-decoration: underline;
}
button:hover {
    cursor: pointer;
}

/* styles */
body {
    background-color: var(--color-bg);
    color: var(--color-txt);
}
.ab-site {
    display: grid;
    grid-template-columns: auto auto 1fr;
    gap: 0;
    height: 100vh;
    max-width: 100vw;
}
.ab-home {
    font-size: var(--text-vh-L);
}
.ab-artist {
    font-size: var(--text-S);
    line-height: calc(var(--text-S) + 2px);
}
.ab-menu {
    position: fixed;
    left: 0; top: 0;
    display: flex;
    flex-flow: row nowrap;
    height: 100vh;
    padding-top: var(--padding-L);
    background-color: var(--color-bg-alt);
    box-shadow: -1px 0 3px var(--color-shadow) inset;
}
.ab-menu-spacer {
    height: 100vh;
}
.ab-menu-expanded .ab-menu-spacer {
    width: calc(var(--nbar-width) + var(--padding-XL));
}
.ab-menu-collapsed .ab-menu-spacer {
    width: 0;
}
.ab-menu-expanded .ab-navbar {
    visibility: visible;
    width: var(--nbar-width);
    padding-left: var(--padding-XL);
}
.ab-menu-collapsed .ab-navbar {
    visibility: hidden;
    width: 0;
    padding-left: 0;
}
nav ul {
    list-style: none;
    padding: 0;
    margin-top: 4.8vmin;
}
nav li {
    font-size: var(--text-vh-M);
    line-height: var(--text-vh-XL);
    font-weight: 300;
    margin: 3.2vmin 0;
}
.ab-toolbar {
    display: flex;
    flex-flow: column;
    gap: var(--padding-M);
    padding: 0 var(--padding-M);
}
.ab-toolbar button {
    height: var(--tbar-btn);
    width: var(--tbar-btn);
}
.ab-gallery {
    display: flex;
    flex-flow: row wrap;
    gap: var(--padding-L);
    height: max-content;
    padding: var(--padding-L);
    margin-left: var(--tbar-width);
    background-color: var(--color-bg);
}
.ab-card {
    display: flex;
    flex-flow: row nowrap;
    max-height: var(--card-img-M);
    background-color: var(--color-paper);
    border: 1px solid var(--color-muted);
    box-shadow: -1px 1px 3px var(--color-fade);
    box-sizing: border-box;
    overflow: clip;
}
.ab-card-icon {
    max-width: var(--card-img-M);
    box-sizing: border-box;
    border-right: 1px solid var(--color-fade);
}
.ab-card-text {
    max-width: calc((var(--card-img-M) * 1.618) - (var(--padding-L) * 2));
    padding: var(--card-padding);
}
.ab-card-title {
    font-weight: 500;
}
.ab-card-synopsis {
    font-weight: 300;
    color: var(--color-muted);
}
.ab-card-year
.ab-collection-year {
    font-weight: 300;
}
.ab-collection {
    display: flex;
    flex-flow: row wrap;
    gap: var(--padding-XXL);
    box-sizing: border-box;
    padding-left: 4vmin;
    padding-bottom: 16vmin;
}
.ab-collection figcaption {
    height: auto;
    padding: 2vmin 0 2vmin 0;
}
.ab-collection-text {
    max-width: 640px;
    margin-right: clamp(7px, 1.6vmin, 16px);
}
.ab-collection-name {
    font-weight: 600;
    font-size: var(--text-XL);
    line-height: var(--text-XL);
    margin-bottom: var(--text-XL);
}
.ab-collection-synopsis {
    font-size: var(--text-L);
    line-height: clamp(27px, 4.8vmin, 42px);
    margin-top: clamp(7px, 1.6vmin, 16px);
    margin-bottom: clamp(6px, 4vmin, 52px);
}
.ab-collection-synopsis aside {
    display: inline;
}
.ab-collection-description {
    font-size: clamp(14px, 2.4vmin, 19px);
    line-height: clamp(23px, 4.8vmin, 32px);
    margin-top: clamp(14px, 3.2vmin, 23px);
    color: var(--color-muted);
}
.ab-collection-description li {
    font-size: clamp(14px, 2.4vmin, 19px);
    line-height: clamp(23px, 4.8vmin, 32px);
    margin-top: clamp(12px, 1.6vmin, 19px);
}
.ab-artwork,
.ab-info-picture {
    display: flex;
    flex-flow: column;
    gap: 1.6vmin;
    box-sizing: border-box;
}
.ab-picture-banner {
    box-sizing: border-box;
    padding-bottom: 4vmin;
}
.ab-picture {
    max-width: 100%;
    width: auto;
    box-shadow: -1px 1px 3px var(--color-shadow);
}
.ab-title {
    font-size: clamp(16px, 2.4vmin, 26px);
    font-weight: 500;
    margin-bottom: clamp(9px, 1.6vmin, 19px);
}
.ab-specs {
    font-size: clamp(14px, 1.6vmin, 19px);
    font-weight: 300;
    color: var(--color-muted);
}
.ab-status {
    font-size: clamp(14px, 1.6vmin, 19px);
    font-weight: 200;
    font-style: italic;
    color: var(--color-fade);
}

/* animations */
.ab-menu,
.ab-gallery {
    transition: background-color 0.3s ease-out, color 0.3s ease-out;
}
.ab-menu-spacer,
.ab-navbar {
    transition: width 0.3s ease-out;
}
.ab-menu-expanded .ab-navbar nav {
    transition: max-height 0.3s ease-out;
}

/* responsive */
@media only screen
and (orientation: landscape)
and (min-width: 1600px) {
    .ab-menu-expanded .ab-card {
        max-width: calc((var(--menu-expanded-gallery-w) / 2) - var(--padding-S));
    }
    .ab-menu-collapsed .ab-card {
        max-width: calc((var(--menu-collapsed-gallery-w) / 2) - var(--padding-S));
    }
    .ab-card-title {
        margin-bottom: 16px;
        font-size: 24px;
        line-height: 36px;
    }
    .ab-card-synopsis {
        font-size: 19px;
        line-height: 36px;
    }
}
@media only screen
and (orientation: landscape)
and (min-width: 1367px)
and (max-width: 1599px) {
    .ab-menu-expanded .ab-card {
        max-width: var(--menu-expanded-gallery-w);
    }
    .ab-menu-collapsed .ab-card {
        max-width: calc((var(--menu-collapsed-gallery-w) / 2) - var(--padding-S));
    }
    .ab-card-title {
        margin-bottom: 16px;
        font-size: 24px;
        line-height: 36px;
    }
    .ab-card-synopsis {
        font-size: 19px;
        line-height: 36px;
    }
}
@media only screen
and (orientation: landscape)
and (min-width: 1180px)
and (max-width: 1366px) {
    .ab-menu-expanded .ab-card {
        max-width: var(--menu-expanded-gallery-w);
    }
    .ab-menu-expanded .ab-card-title {
        margin-bottom: 16px;
        font-size: 24px;
        line-height: 36px;
    }
    .ab-menu-expanded .ab-card-synopsis {
        font-size: 19px;
        line-height: 36px;
    }
    .ab-menu-collapsed .ab-card {
        max-height: var(--card-img-S);
        max-width: calc((var(--menu-collapsed-gallery-w) / 2) - var(--padding-S));
    }
    .ab-menu-collapsed .ab-card-icon {
        max-width: var(--card-img-S);
    }
    .ab-menu-collapsed .ab-card-text {
        max-width: calc((var(--card-img-S) * 1.618) - (var(--padding-S) * 2));
        padding: var(--padding-S);
    }
    .ab-menu-collapsed .ab-card-title {
        margin-bottom: clamp(2px, 1vw, 16px);
        font-size: var(--card-text-hh);
        line-height: calc(var(--card-text-hh) + 0.6vw);
    }
    .ab-menu-collapsed .ab-card-synopsis {
        font-size: var(--card-text-pp);
        line-height: calc(var(--card-text-pp) + 1vw);
    }
}
@media only screen
and (orientation: landscape)
and (max-width: 1179px)
and (min-height: 600px) {
    .ab-menu-expanded .ab-card {
        max-width: var(--menu-expanded-gallery-w);
    }
    .ab-menu-collapsed .ab-card {
        max-width: var(--menu-collapsed-gallery-w);
    }
    .ab-card-title {
        margin-bottom: clamp(2px, 1.6vw, 16px);
        font-size: var(--card-text-h);
        line-height: calc(var(--card-text-h) + 0.8vw);
    }
    .ab-card-synopsis {
        font-size: var(--card-text-p);
        line-height: calc(var(--card-text-p) + 1.6vw);
    }
}
@media only screen
and (orientation: landscape)
and (max-height: 599px) {
    .ab-card {
        max-width: 92vw;
    }
    .ab-card-text {
        max-width: 92vw;
    }
    .ab-menu-expanded .ab-card-title {
        margin-bottom: clamp(2px, 1vw, 16px);
        font-size: var(--card-text-h);
        line-height: calc(var(--card-text-h) + 0.6vw);
    }
    .ab-menu-collapsed .ab-card-title {
        margin-bottom: clamp(2px, 1vw, 16px);
        font-size: var(--card-text-hw);
        line-height: calc(var(--card-text-hw) + 0.6vw);
    }
    .ab-card-synopsis {
        font-size: var(--card-text-p);
        line-height: calc(var(--card-text-p) + 1vw);
    }
}
@media only screen
and (orientation: landscape)
and (max-height: 320px) {
    .ab-menu-expanded .ab-card-text {
        padding: 12px;
    }
}
@media only screen
and (orientation: portrait) {
    .ab-site {
        grid-template-columns: 1fr;
        height: max-content;
    }
    .ab-menu {
        width: 100vw;
        height: max-content;
        padding-top: 0;
    }
    .ab-menu-collapsed .ab-menu * {
        margin: 0;
    }
    .ab-menu-expanded .ab-menu {
        background-color: var(--color-bg-alt-alpha);
    }
    .ab-menu-expanded .ab-menu-spacer,
    .ab-menu-collapsed .ab-menu-spacer {
        height: clamp(80px, 16vmin, 120px);
        width: 100vw;
    }
    .ab-menu-collapsed .ab-navbar,
    .ab-menu-expanded .ab-navbar {
        width: max-content;
        padding: var(--padding-M);
    }
    .ab-menu-collapsed .ab-navbar nav {
        max-height: 0;
    }
    .ab-menu-expanded .ab-navbar nav {
        max-height: 100vh;
    }
    .ab-home,
    .ab-artist {
        visibility: visible;
    }
    .ab-menu-collapsed .ab-toolbar {
        flex-flow: row-reverse nowrap;
        margin: auto 0 auto auto;
    }
    .ab-menu-expanded .ab-toolbar {
        flex-flow: column-reverse;
        padding-bottom: var(--padding-XL);
        margin: auto 0 0 auto;
    }
    .ab-gallery {
        box-sizing: border-box;
        margin-left: 0;
    }
    .ab-collection {
        padding: 8vmin 4vmin 16vmin 4vmin;
    }
    .ab-card {
        flex-flow: column;
        max-height: calc(var(--card-img-v) * 1.618);
        max-width: var(--card-img-v);
        box-sizing: border-box;
    }
    .ab-card-icon {
        max-width: var(--card-img-v);
        border-right: none;
        border-bottom: 1px solid var(--color-fade);
    }
    .ab-card-text {
        height: calc(var(--card-img-v) / 2.618);;
        max-width: none;
    }
    .ab-card-title {
        margin-bottom: clamp(2px, 1.6vw, 16px);
        font-size: var(--card-text-hw);
        line-height: calc(var(--card-text-hw) + 0.8vw);
    }
    .ab-card-synopsis {
        font-size: var(--card-text-pw);
        line-height: calc(var(--card-text-pw) + 2.4vw);
    }
}
@media only screen
and (orientation: portrait)
and (min-width: 768px) {
    .ab-card {
        max-height: calc(((var(--card-img-v) / 2) - var(--padding-S)) * 1.618);
        max-width: calc((var(--card-img-v) / 2) - var(--padding-S));
    }
    .ab-card-icon {
        max-width: calc((var(--card-img-v) / 2) - var(--padding-S));
    }
    .ab-card-synopsis {
        line-height: calc(var(--card-text-pw) + 1.6vw);
    }
}