@import url(https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;400;700&display=swap);

:root {
    --primary-color: #301fc9;
    --secondary-color: #f5f5f5;
    --white-color: #ffffff;
    --black-color: #191a1e;
    --base-hover-color: rgb(7, 34, 143);
    --font-family: 'proxima-nova', sans-serif;
}

body {
    color: var(--primary-color);
    background-color: var(--white-color);
    font-family: var(--font-family);
    font-size: 16px;
    direction: ltr;
    margin: 0
}

body,html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

body.blur-active > *:not(footer) {
    filter: blur(6px);
}

html {
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%
}

* {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    -moz-tap-highlight-color: rgba(0,0,0,0);
    margin: 0;
}

:focus {
    outline: 0
}

a {
    -webkit-transition: .25s linear;
    -o-transition: .25s linear;
    transition: .25s linear;
    text-decoration: none;
    color: inherit;
    display: inline-block;
}

img {
    height: auto;
    vertical-align: middle;
    border: 0;
    -ms-interpolation-mode: bicubic
}

ol, ul {
    margin: 0;
    padding: 0;
    list-style-type: none
}

h1{
    font-weight: 900;
    text-align: center;
    font-size: xxx-large;
}

a, label, span {
    font-weight: 400
}

::-webkit-scrollbar {
    width: .5rem
}
::-webkit-scrollbar-track {
    background: #f1f1f1
}
::-webkit-scrollbar-thumb {
    background: #191a1e
}
::-webkit-scrollbar-thumb:hover {
    background: #191a1e
}

.breadcrumb li{
    font-weight: 600;
    color: grey;
}

.breadcrumb li.active{
    color: #301fc9;
}

.home-about-module{
    padding: 0 20px;
}

.home-about-module .artistic-statement,
.home-about-module .biography{
    padding: 1rem 0;
    border-top: thin solid #301fc9;
}

.id-photos {
    display: flex;
    width: 100%;
}

.id-photos img {
    width: calc(100% / 6);
    height: auto;
    object-fit: cover;
}

.menu{
    display: flex;
    justify-content: space-between;
    padding: 1rem 0;
}

.menu button{
    width: 49%;
    font-size: xx-large;
    padding: 2rem 1rem;
    background-color: #fff;
    border: thin solid #301fc9;
    color: #301fc9;
}

.menu button a{
    font-weight: 900;
}

.credits,
.join-mailing-list{
    cursor: pointer;
}

.mailing-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px); /* Safari */
    z-index: 100;
}

.mailing-overlay.active {
    display: block;
}

.mailing-header{
    display: flex;
    justify-content: space-between;
}

.mailing-header p{
    font-weight: 600;
    cursor: pointer;
}

.mailing-dropdown {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 101;
    background: #fff;
    padding: 2rem;
    width: 50%;
    transition: bottom 0.4s ease;
}

.mailing-dropdown.active {
    display: block;
    bottom: 2rem;
}

#mailingForm{
    margin-top: 2rem;
    display: block;
}

#mailingForm input{
    width: 100%;
    height: 3rem;
    margin: 1rem 0 2rem 0;
}

#mailingForm button{
    float: right;
    margin-top: 0.5rem;
    font-size: large;
    font-weight: 600;
    padding: 1rem 2.5rem;
    background-color: #fff;
    border: thin solid #301fc9;
    color: #301fc9;
}


.join-mailing-list {
    cursor: pointer;
}

.selected-works-page {
    height: calc(100vh - 44px);
    padding: 1.5rem 1.5rem 0 1.5rem;
    display: flex;
    flex-direction: column;
}

.selected-works-page .breadcrumb ul {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.selected-works-page .breadcrumb li {
    font-weight: 600;
    color: grey;
}

.selected-works-page .breadcrumb li:last-child {
    padding-left: 1.5rem;
    color: var(--primary-color);
}

.selected-works-module {
    flex: 1;
    min-height: 0;
    margin-top: 2rem;
    display: flex;
    gap: 2rem;
    align-items: stretch;
}

/* Left: works list */
.works-list {
    width: 28%;
    flex-shrink: 0;
    overflow-y: auto;
}

.works-list ul {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.work-item {
    display: flex;
    gap: 1rem;
    cursor: pointer;
    color: var(--black-color);
    font-size: 1rem;
}

.work-item .work-num {
    min-width: 2rem;
    flex-shrink: 0;
}

.work-item.active {
    color: var(--primary-color);
    font-weight: 700;
}

.work-item:hover {
    color: var(--primary-color);
}

/* Right: image + caption */
.works-display {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    overflow: hidden;
}

.works-image {
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.works-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: top left;
    display: block;
}

.works-caption {
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: 1rem;
}

.caption-left p {
    line-height: 1.5;
}

.caption-left #caption-title {
    color: var(--black-color);
    font-style: italic;
}

.caption-left #caption-materials,
.caption-left #caption-dimensions {
    color: var(--primary-color);
    font-size: 0.9rem;
}

.caption-right {
    text-align: right;
}

.caption-right p {
    color: var(--black-color);
    font-size: 0.9rem;
    line-height: 1.5;
}

.caption-right a {
    color: var(--black-color);
}

.caption-right a:hover {
    color: var(--primary-color);
}
header{
    padding: 1rem 0;
}

footer{
    height: 44px;
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    border-top: thin solid #301fc9;
}