/* =========================================================
HILDEBRANDO DE MELO — DEEP
STYLE.CSS
========================================================= */


/* ---------------------------------------------------------
TIPOGRAFIA
DEEP: GT Pressura / Grilli Type

Nota:
O site usa GT Pressura se a fonte estiver instalada/licenciada
no sistema. Caso contrário, usa fallback sans-serif.
--------------------------------------------------------- */

:root {
--font-main: "GT Pressura", "Arial Narrow", Arial, Helvetica, sans-serif;

--black: #0a0a0a;
--white: #ffffff;
--grey: #777777;
--light-grey: #eeeeee;
--border: #d8d8d8;

--page-padding: clamp(24px, 5vw, 80px);
--section-space: clamp(100px, 14vw, 220px);

--transition: 0.35s ease;
}


/* ---------------------------------------------------------
RESET
--------------------------------------------------------- */

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

html {
scroll-behavior: smooth;
}

body {
margin: 0;

background: var(--white);
color: var(--black);

font-family: var(--font-main);
font-size: 16px;
line-height: 1.45;

-webkit-font-smoothing: antialiased;
}

body.modal-open {
overflow: hidden;
}

img {
display: block;
max-width: 100%;
}

a {
color: inherit;
text-decoration: none;
}

button {
font: inherit;
}

p {
margin-top: 0;
}

::selection {
background: var(--black);
color: var(--white);
}


/* =========================================================
HEADER
========================================================= */

.site-header {
position: fixed;
top: 0;
left: 0;

width: 100%;
z-index: 1000;

background: rgba(255, 255, 255, 0.96);
border-bottom: 1px solid var(--border);

backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}

.header-inner {
min-height: 84px;

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

display: flex;
align-items: center;
justify-content: space-between;

gap: 40px;
}

.brand {
display: flex;
flex-direction: column;

line-height: 1;
}

.brand-name {
font-size: 15px;
font-weight: 700;
letter-spacing: 0.04em;
}

.brand-description {
margin-top: 7px;

font-size: 10px;
letter-spacing: 0.18em;

color: var(--grey);
}

.main-navigation {
display: flex;
align-items: center;

gap: clamp(18px, 2.2vw, 38px);
}

.main-navigation a,
.language-button,
.menu-button {
position: relative;

border: 0;
padding: 0;

background: transparent;
color: var(--black);

cursor: pointer;

font-size: 11px;
font-weight: 700;
letter-spacing: 0.09em;
}

.main-navigation a::after {
content: "";

position: absolute;
left: 0;
bottom: -7px;

width: 0;
height: 1px;

background: var(--black);

transition: width var(--transition);
}

.main-navigation a:hover::after {
width: 100%;
}

.language-button {
border: 1px solid var(--black);

padding: 7px 10px;
}

.language-button:hover {
background: var(--black);
color: var(--white);
}

.menu-button {
display: none;
}


/* =========================================================
HERO
========================================================= */

.hero {
min-height: 100vh;

padding:
150px
var(--page-padding)
70px;

display: flex;
align-items: flex-end;

border-bottom: 1px solid var(--black);
}

.hero-inner {
width: 100%;
}

.hero-overline {
margin-bottom: 18px;

font-size: 12px;
font-weight: 700;

letter-spacing: 0.15em;
}

.hero h1 {
margin: 0;

font-size: clamp(110px, 24vw, 390px);
font-weight: 700;

letter-spacing: -0.07em;
line-height: 0.72;
}

.hero-subtitle {
margin:
clamp(40px, 7vw, 100px)
0
0;

font-size: clamp(26px, 4vw, 60px);

letter-spacing: -0.035em;
line-height: 1;
}

.hero-meta {
margin-top: 55px;

padding-top: 18px;

border-top: 1px solid var(--black);

display: flex;
justify-content: space-between;

font-size: 11px;
font-weight: 700;

letter-spacing: 0.1em;
}


/* =========================================================
ESTRUTURA DAS SECÇÕES
========================================================= */

.section {
position: relative;

padding:
var(--section-space)
var(--page-padding);

border-bottom: 1px solid var(--black);

display: grid;

grid-template-columns:
minmax(50px, 0.6fr)
minmax(0, 8fr);

gap: clamp(30px, 5vw, 100px);
}

.section-number {
padding-top: 6px;

font-size: 11px;
font-weight: 700;

letter-spacing: 0.1em;
}

.section-content {
width: 100%;
max-width: 1500px;
}

.section-label {
margin-bottom: 45px;

font-size: 11px;
font-weight: 700;

letter-spacing: 0.16em;
}

.section h2 {
margin:
0
0
clamp(60px, 9vw, 140px);

max-width: 1200px;

font-size: clamp(52px, 8.5vw, 145px);
font-weight: 400;

letter-spacing: -0.055em;
line-height: 0.88;
}

.section-intro,
.lead-text {
max-width: 850px;

font-size: clamp(24px, 3vw, 45px);

letter-spacing: -0.025em;
line-height: 1.15;
}


/* =========================================================
INTRODUÇÃO
========================================================= */

.text-columns {
display: grid;

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

gap: clamp(50px, 9vw, 160px);

max-width: 1200px;
}

.text-columns p:not(.lead-text) {
max-width: 540px;

font-size: clamp(17px, 1.4vw, 22px);
line-height: 1.55;
}

blockquote {
margin:
clamp(100px, 14vw, 200px)
0
0;

padding:
clamp(50px, 8vw, 120px)
0
0;

border-top: 1px solid var(--black);
}

blockquote p {
margin: 0;

max-width: 1250px;

font-size: clamp(45px, 8vw, 130px);

letter-spacing: -0.05em;
line-height: 0.92;
}

blockquote cite {
display: block;

margin-top: 60px;

font-style: normal;

font-size: 12px;
line-height: 1.5;

letter-spacing: 0.06em;
}


/* =========================================================
SÉRIES
========================================================= */

.series-grid {
margin-top: 90px;

display: grid;

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

gap:
clamp(50px, 7vw, 110px)
clamp(20px, 3vw, 50px);
}

.series-card {
cursor: pointer;
}

.series-card-image {
overflow: hidden;

aspect-ratio: 4 / 5;

background: var(--light-grey);
}

.series-card-image img {
width: 100%;
height: 100%;

object-fit: contain;

transition: transform 0.7s ease;
}

.series-card:hover img {
transform: scale(1.025);
}

.series-card-number {
display: block;

margin-top: 18px;

font-size: 10px;
letter-spacing: 0.12em;

color: var(--grey);
}

.series-card h3 {
margin: 8px 0 0;

font-size: clamp(22px, 2vw, 34px);
font-weight: 400;

letter-spacing: -0.025em;
}


/* =========================================================
DEEP — ÍNDICE
========================================================= */

.deep-series-list {
border-top: 1px solid var(--black);
}

.deep-series-list button {
width: 100%;

padding:
clamp(18px, 2vw, 30px)
0;

border: 0;
border-bottom: 1px solid var(--border);

background: transparent;
color: var(--black);

display: flex;
align-items: center;
justify-content: space-between;

cursor: pointer;

text-align: left;

font-size: clamp(23px, 3vw, 48px);
font-weight: 400;

letter-spacing: -0.03em;

transition:
padding-left var(--transition),
background var(--transition),
color var(--transition);
}

.deep-series-list button::after {
content: "→";

font-size: 0.75em;
}

.deep-series-list button:hover {
padding-left: 20px;

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


/* =========================================================
ARQUIVO / OBRAS
========================================================= */

.artwork-grid {
display: grid;

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

gap:
clamp(50px, 7vw, 100px)
clamp(15px, 2.5vw, 40px);
}

.artwork-card {
cursor: pointer;
}

.artwork-image {
overflow: hidden;

min-height: 280px;

display: flex;
align-items: center;
justify-content: center;

background: #f5f5f5;
}

.artwork-image img {
width: 100%;
height: auto;

transition:
transform 0.6s ease,
opacity var(--transition);
}

.artwork-card:hover img {
transform: scale(1.025);
opacity: 0.92;
}

.artwork-information {
margin-top: 16px;
}

.artwork-title {
margin: 0;

font-size: 17px;
font-weight: 700;
}

.artwork-meta {
margin-top: 6px;

color: var(--grey);

font-size: 11px;
line-height: 1.45;

letter-spacing: 0.03em;
}

.load-more {
margin-top: 100px;

border: 1px solid var(--black);

padding: 18px 30px;

background: transparent;
color: var(--black);

cursor: pointer;

font-size: 11px;
font-weight: 700;

letter-spacing: 0.1em;

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

.load-more:hover {
background: var(--black);
color: var(--white);
}


/* =========================================================
MODAL — FICHA DA OBRA
========================================================= */

.artwork-modal {
position: fixed;
inset: 0;

z-index: 2000;

padding:
clamp(25px, 5vw, 80px);

background: var(--white);

overflow-y: auto;

opacity: 0;
visibility: hidden;

pointer-events: none;

transition:
opacity var(--transition),
visibility var(--transition);
}

.artwork-modal.active {
opacity: 1;
visibility: visible;

pointer-events: auto;
}

.modal-close {
position: fixed;
top: 25px;
right: 35px;

z-index: 2010;

width: 50px;
height: 50px;

border: 1px solid var(--black);

background: var(--white);

cursor: pointer;

font-size: 30px;
font-weight: 300;

line-height: 1;
}

.modal-close:hover {
background: var(--black);
color: var(--white);
}

.modal-inner {
min-height: calc(100vh - 160px);

display: grid;

grid-template-columns:
minmax(0, 1.8fr)
minmax(300px, 0.7fr);

gap: clamp(50px, 8vw, 140px);

align-items: center;
}

.modal-image {
min-height: 70vh;

display: flex;
align-items: center;
justify-content: center;
}

.modal-image img {
max-width: 100%;
max-height: 80vh;

object-fit: contain;
}

.modal-series {
margin-bottom: 25px;

font-size: 11px;
font-weight: 700;

letter-spacing: 0.13em;
}

.modal-information h2 {
margin: 0 0 70px;

font-size: clamp(45px, 5vw, 85px);
font-weight: 400;

letter-spacing: -0.045em;
line-height: 0.95;
}

.artwork-data {
margin: 0;

border-top: 1px solid var(--black);
}

.artwork-data div {
padding: 18px 0;

border-bottom: 1px solid var(--border);

display: grid;

grid-template-columns: 120px 1fr;

gap: 20px;
}

.artwork-data dt {
font-size: 10px;
font-weight: 700;

letter-spacing: 0.1em;
}

.artwork-data dd {
margin: 0;

font-size: 14px;
}


/* =========================================================
CRÍTICA
========================================================= */

.criticism-grid {
display: grid;

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

border-top: 1px solid var(--black);
}

.critic {
min-height: 430px;

padding:
clamp(35px, 5vw, 70px)
clamp(20px, 4vw, 60px);

border-bottom: 1px solid var(--border);
}

.critic:nth-child(odd) {
border-right: 1px solid var(--border);
}

.critic span {
font-size: 10px;
font-weight: 700;

letter-spacing: 0.14em;
}

.critic h3 {
margin: 40px 0 10px;

font-size: clamp(32px, 4vw, 62px);
font-weight: 400;

letter-spacing: -0.04em;
}

.critic-role {
margin-bottom: 50px;

color: var(--grey);

font-size: 11px;
line-height: 1.4;

letter-spacing: 0.05em;
}

.critic > p:last-child {
max-width: 500px;

font-size: clamp(17px, 1.5vw, 22px);
line-height: 1.5;
}


/* =========================================================
BIOGRAFIA
========================================================= */

.biography-layout {
display: grid;

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

gap: clamp(60px, 10vw, 180px);
}

.biography-text {
max-width: 580px;
}

.biography-text p {
margin-bottom: 28px;

font-size: clamp(17px, 1.4vw, 21px);

line-height: 1.55;
}


/* =========================================================
PUBLICAÇÃO
========================================================= */

.publication-layout {
display: grid;

grid-template-columns:
minmax(0, 1.2fr)
minmax(320px, 0.8fr);

gap: clamp(60px, 10vw, 180px);
}

.publication-layout h2 {
margin-bottom: 40px;
}

.publication-years {
font-size: 14px;
font-weight: 700;

line-height: 1.5;
letter-spacing: 0.07em;
}

.publication-data {
margin: 0;

border-top: 1px solid var(--black);
}

.publication-data div {
padding: 18px 0;

border-bottom: 1px solid var(--border);

display: grid;

grid-template-columns: 110px 1fr;

gap: 25px;
}

.publication-data dt {
font-size: 10px;
font-weight: 700;

letter-spacing: 0.09em;
}

.publication-data dd {
margin: 0;

font-size: 13px;
line-height: 1.55;
}


/* =========================================================
CONTACTO
========================================================= */

.contact {
min-height: 80vh;
}

.contact h2 {
margin-bottom: 50px;
}

.contact > .section-content > p:not(.section-label) {
font-size: 20px;
}

.contact-links {
margin-top: 80px;

display: flex;

gap: 20px;
}

.contact-links a {
border: 1px solid var(--black);

padding: 16px 25px;

font-size: 11px;
font-weight: 700;

letter-spacing: 0.1em;

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

.contact-links a:hover {
background: var(--black);
color: var(--white);
}


/* =========================================================
FOOTER
========================================================= */

footer {
padding:
35px
var(--page-padding);

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

.footer-inner {
display: grid;

grid-template-columns:
1fr
1fr
auto;

gap: 30px;

font-size: 10px;
font-weight: 700;

letter-spacing: 0.09em;
}


/* =========================================================
RESPONSIVO — TABLET
========================================================= */

@media (max-width: 1050px) {

.main-navigation {
gap: 16px;
}

.main-navigation a {
font-size: 10px;
}

.series-grid {
grid-template-columns:
repeat(2, minmax(0, 1fr));
}

.artwork-grid {
grid-template-columns:
repeat(3, minmax(0, 1fr));
}

}


/* =========================================================
RESPONSIVO — MOBILE
========================================================= */

@media (max-width: 760px) {

:root {
--page-padding: 20px;
--section-space: 90px;
}


/* HEADER */

.header-inner {
min-height: 70px;
}

.menu-button {
display: block;
}

.main-navigation {
position: absolute;

top: 70px;
left: 0;

width: 100%;

padding:
30px
var(--page-padding)
40px;

background: var(--white);

border-bottom: 1px solid var(--black);

display: none;
flex-direction: column;
align-items: flex-start;

gap: 25px;
}

.main-navigation.open {
display: flex;
}

.main-navigation a {
font-size: 18px;
}


/* HERO */

.hero {
min-height: 85vh;

padding-top: 120px;
}

.hero h1 {
font-size: clamp(85px, 30vw, 170px);
}

.hero-meta {
flex-direction: column;

gap: 8px;
}


/* SECÇÕES */

.section {
display: block;
}

.section-number {
margin-bottom: 50px;
}

.section-label {
margin-bottom: 30px;
}

.section h2 {
margin-bottom: 70px;
}


/* INTRO */

.text-columns {
grid-template-columns: 1fr;

gap: 45px;
}


/* SÉRIES */

.series-grid {
grid-template-columns: 1fr;

gap: 60px;
}


/* OBRAS */

.artwork-grid {
grid-template-columns:
repeat(2, minmax(0, 1fr));

gap:
50px
15px;
}

.artwork-image {
min-height: 160px;
}


/* MODAL */

.artwork-modal {
padding:
90px
20px
40px;
}

.modal-inner {
display: block;
}

.modal-image {
min-height: auto;

margin-bottom: 60px;
}

.modal-image img {
max-height: 60vh;
}

.modal-information h2 {
margin-bottom: 50px;
}


/* CRÍTICA */

.criticism-grid {
grid-template-columns: 1fr;
}

.critic {
min-height: auto;

padding:
50px
0;
}

.critic:nth-child(odd) {
border-right: 0;
}


/* BIOGRAFIA */

.biography-layout {
grid-template-columns: 1fr;

gap: 50px;
}


/* PUBLICAÇÃO */

.publication-layout {
grid-template-columns: 1fr;

gap: 70px;
}


/* CONTACTO */

.contact-links {
flex-direction: column;
align-items: flex-start;
}


/* FOOTER */

.footer-inner {
grid-template-columns: 1fr;

gap: 12px;
}

}


/* =========================================================
MOBILE MUITO PEQUENO
========================================================= */

@media (max-width: 450px) {

.artwork-grid {
grid-template-columns: 1fr;
}

.artwork-image {
min-height: 240px;
}

}


/* =========================================================
ACESSIBILIDADE / MOVIMENTO
========================================================= */

@media (prefers-reduced-motion: reduce) {

*,
*::before,
*::after {
scroll-behavior: auto !important;

transition-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
}

}



/* =========================================================
POPUP / LIGHTBOX DAS OBRAS
========================================================= */

.image-modal {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.94);
z-index: 9999;

display: none;
align-items: center;
justify-content: center;

padding: 40px;
}

.image-modal.is-open {
display: flex;
}

.image-modal-content {
width: min(1200px, 92vw);
max-height: 90vh;

display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

.image-modal img {
max-width: 100%;
max-height: 78vh;

object-fit: contain;
display: block;
}

.image-modal-info {
width: 100%;
margin-top: 18px;

color: #fff;
}

.image-modal-info h2 {
margin: 0 0 6px;
font-size: 1.4rem;
font-weight: 400;
}

.image-modal-info p {
margin: 0;
font-size: 0.8rem;
opacity: 0.7;
}

.image-modal-close {
position: absolute;
top: 25px;
right: 30px;

border: 0;
background: transparent;

color: white;
font-size: 42px;
font-weight: 200;

cursor: pointer;
}

@media (max-width: 700px) {
.image-modal {
padding: 20px;
}

.image-modal img {
max-height: 70vh;
}

.image-modal-close {
top: 15px;
right: 18px;
}
}