/* Studio Eiffel – public site styles.
   Values mirror the original theme settings so the site looks the same. */
:root {
    --bg: #fff;
    --wrapper-width: 992px;
    --gutter: 16px;
    --link: #929292;
    --link-hover: #049cdb;
    --menu-color: #6b6b6b;
    --heading-color: #696969;
    --subheading-color: #b2b2b2;
    --text-color: #8a8a8a;
    --thumb-title-color: #696969;
    --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
    --serif: Georgia, Times, "Times New Roman", serif;
    --logo-max-width: 320px;
}

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 62.5%; -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    background: var(--bg);
    color: var(--text-color);
    font-family: var(--serif);
    font-size: 1.1rem;
    line-height: 1.3;
    -webkit-font-smoothing: antialiased;
}
img, video { max-width: 100%; height: auto; }
a { color: var(--link); text-decoration: none; transition: color .15s; }
a:hover { color: var(--link-hover); }
button { font: inherit; }
.sr-only {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.page-wrapper { max-width: var(--wrapper-width); margin: 0 auto; padding: 0 16px; min-height: 100vh; display: flex; flex-direction: column; }
main.container { flex: 1; }

/* ---------- Header ---------- */
.site-header { text-align: center; padding: 48px 0 30px; position: relative; }
.brand { display: inline-block; }
.brand img { display: block; max-width: min(var(--logo-max-width), 80vw); margin: 0 auto; }
.brand-title { font: 700 4.2rem/1 var(--sans); color: #2a2a2a; }
.site-nav ul { list-style: none; margin: 34px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; }
.site-nav li { font: 300 1.4rem/1.3 var(--sans); color: var(--menu-color); }
.site-nav li + li::before { content: "/"; padding: 0 1.2rem; color: var(--menu-color); }
.site-nav a { color: var(--menu-color); }
.site-nav a:hover { color: var(--link-hover); }
.site-nav li.active a { text-decoration: underline; text-underline-offset: 3px; }
.mobile-nav-toggle { display: none; }

@media (max-width: 599px) {
    .site-header { padding: 32px 0 20px; }
    .mobile-nav-toggle {
        display: block; position: absolute; right: 0; top: 30px; width: 40px; height: 40px;
        background: none; border: 0; cursor: pointer; padding: 0;
    }
    .mobile-nav-toggle span, .mobile-nav-toggle span::before, .mobile-nav-toggle span::after {
        display: block; position: absolute; left: 9px; width: 22px; height: 2px; background: var(--menu-color); content: "";
        transition: transform .2s;
    }
    .mobile-nav-toggle span { top: 19px; }
    .mobile-nav-toggle span::before { top: -7px; left: 0; }
    .mobile-nav-toggle span::after { top: 7px; left: 0; }
    .nav-open .mobile-nav-toggle span { background: transparent; }
    .nav-open .mobile-nav-toggle span::before { transform: translateY(7px) rotate(45deg); }
    .nav-open .mobile-nav-toggle span::after { transform: translateY(-7px) rotate(-45deg); }
    .site-nav { display: none; }
    .nav-open .site-nav { display: block; }
    .site-nav ul { flex-direction: column; margin-top: 20px; }
    .site-nav li { font-size: 1.8rem; padding: 6px 0; }
    .site-nav li + li::before { display: none; }
    .brand img { max-width: min(var(--logo-max-width), 62vw); }
}

/* ---------- Feature slideshow ---------- */
.slideshow { position: relative; margin-bottom: var(--gutter); background: #000; aspect-ratio: 16 / 9; overflow: hidden; }
.feature { position: absolute; inset: 0; opacity: 0; transition: opacity .6s; pointer-events: none; }
.feature.is-active { opacity: 1; pointer-events: auto; }
.feature-inner { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; position: relative; }
div.feature-inner { cursor: default; }
.feature img { width: 100%; height: 100%; object-fit: cover; display: block; }
.feature iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.play {
    position: absolute; left: 16px; bottom: 16px; width: 64px; height: 36px; border-radius: 4px;
    background: rgba(0, 0, 0, .55); transition: background .2s;
}
.play::after {
    content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-35%, -50%);
    border-style: solid; border-width: 8px 0 8px 13px; border-color: transparent transparent transparent #fff;
}
.feature-inner:hover .play, .thumbnail:hover .play { background: var(--link-hover); }
.slide-nav {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; border: 0; background: rgba(0,0,0,.35);
    color: #fff; font-size: 30px; width: 44px; height: 64px; cursor: pointer; line-height: 1;
}
.slide-nav.prev { left: 0; } .slide-nav.next { right: 0; }

/* ---------- Thumbnail grid ---------- */
.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); margin-bottom: var(--gutter); }
@media (max-width: 991px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .grid { grid-template-columns: 1fr; } }
.thumbnail { display: block; color: inherit; }
.placeholder { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #f3f3f3; }
.placeholder.ratio-4-3 { aspect-ratio: 4 / 3; }
.placeholder img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .3s, transform .4s; }
.project-thumbnail:hover .placeholder img { opacity: .85; }
.thumbnail-titles { text-align: center; padding: 14px 6px 22px; }
.thumbnail-titles h4 { margin: 0; font: 700 1.3rem/1.3 var(--sans); color: var(--thumb-title-color); }
.project-thumbnail:hover h4 { color: var(--link-hover); }

/* ---------- Project page ---------- */
.project-media .media-item { margin-bottom: var(--gutter); }
.media-item.embed { position: relative; background: #000; }
.media-item.embed.ratio-16-9 { aspect-ratio: 16 / 9; }
.media-item.embed.ratio-ig { max-width: 540px; margin-left: auto; margin-right: auto; aspect-ratio: 4 / 5.6; background: #fff; }
.media-item iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.media-item.media-file video { display: block; width: 100%; }
.project-info { padding: 8px 0 30px; }
.project-titles h1 { margin: 0 0 4px; font: 700 1.4rem/1.3 var(--sans); color: var(--heading-color); }
.project-titles h2 { margin: 0 0 14px; font: 400 1.2rem/1.3 var(--serif); color: var(--subheading-color); }
.project-titles h2 a { color: var(--subheading-color); }
.draft-note { background: #fff6d6; color: #7a5b00; padding: 8px 12px; font: 1.3rem var(--sans); }

/* ---------- Pages ---------- */
.page-title { text-align: center; }
.page-title h1 { font: 700 1.4rem/1.3 var(--sans); color: var(--heading-color); margin: 0 0 18px; }
.page-details { padding-bottom: 30px; }

/* ---------- Rich text (shared by pages and project descriptions) ---------- */
.editor-content p { margin: 0 0 1.1em; }
.editor-content h1, .editor-content h2, .editor-content h3 { font-family: var(--sans); color: var(--heading-color); line-height: 1.3; }
.editor-content h1 { font-size: 1.4rem; }
.editor-content h2 { font-size: 1.3rem; }
.editor-content h3 { font-size: 1.2rem; }
.editor-content img { display: inline-block; }
.editor-content figure { margin: 0 auto 1.1em; text-align: center; }
.editor-content figure.wrap-center { text-align: center; }
.editor-content figure img { margin: 0 auto; }
.editor-content blockquote { margin: 0 0 1.1em; padding-left: 1em; border-left: 2px solid #ddd; }
.editor-content ul, .editor-content ol { padding-left: 1.4em; }
.editor-content .embed-responsive { position: relative; }
.editor-content iframe { max-width: 100%; }

/* Column layout used inside rich text (carried over from the old site) */
.fab-row { display: flex; flex-wrap: wrap; margin: 0 -8px; }
.fab-col { padding: 0 8px; flex: 0 0 100%; max-width: 100%; }
.fab-order-1 { order: 1; } .fab-order-2 { order: 2; } .fab-order-3 { order: 3; }
@media (min-width: 600px) {
    .fab-col-sm-6 { flex-basis: 50%; max-width: 50%; }
}
@media (min-width: 992px) {
    .fab-col-md-3 { flex-basis: 25%; max-width: 25%; }
    .fab-col-md-4 { flex-basis: 33.333%; max-width: 33.333%; }
    .fab-col-md-6 { flex-basis: 50%; max-width: 50%; }
    .fab-col-md-8 { flex-basis: 66.666%; max-width: 66.666%; }
    .fab-order-md-1 { order: 1; } .fab-order-md-2 { order: 2; } .fab-order-md-3 { order: 3; }
}

/* ---------- Footer ---------- */
.site-footer { text-align: center; padding: 30px 0 40px; }
.site-links { list-style: none; padding: 0; margin: 0 0 12px; display: flex; justify-content: center; gap: 8px; }
.site-links a { display: block; width: 36px; height: 36px; color: #000; }
.site-links a:hover { color: var(--link-hover); }
.site-links svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: .9; stroke-linecap: round; stroke-linejoin: round; }
.site-meta { font-size: 1.1rem; color: var(--text-color); }
.site-meta a { color: inherit; }

/* ---------- Lightbox ---------- */
.lightbox {
    position: fixed; inset: 0; z-index: 1000; background: #fff;
    display: flex; align-items: center; justify-content: center; padding: 50px 16px 24px; overflow-y: auto;
}
.lightbox[hidden] { display: none; }
.lb-content { width: 100%; max-width: 1100px; margin: auto; }
.lb-frame { position: relative; width: 100%; max-width: calc(76vh * 16 / 9); margin: 0 auto; aspect-ratio: 16 / 9; background: #000; }
.lb-frame.ratio-ig { aspect-ratio: 4 / 5.6; max-width: 480px; margin: 0 auto; background: #fff; }
.lb-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.lb-image { text-align: center; }
.lb-image img { max-height: 86vh; width: auto; margin: 0 auto; display: block; }
.lb-caption { max-width: min(1100px, calc(76vh * 16 / 9)); margin: 14px auto 0; }
.lb-caption h3 { margin: 0 0 8px; font: 700 1.4rem/1.3 var(--sans); color: var(--heading-color); }
.lb-caption .more { font: 1.2rem var(--sans); }
.lb-close, .lb-prev, .lb-next {
    position: fixed; border: 0; background: none; cursor: pointer; color: #333; z-index: 2; line-height: 1;
}
.lb-close { top: 10px; right: 14px; font-size: 38px; }
.lb-prev, .lb-next { top: 50%; transform: translateY(-50%); font-size: 46px; padding: 10px; }
.lb-prev { left: 4px; } .lb-next { right: 4px; }
.lb-close:hover, .lb-prev:hover, .lb-next:hover { color: var(--link-hover); }
body.lb-open { overflow: hidden; }