/*
==========================================================
InArche Publications
Premium Luxury UI
Version: 2.0
==========================================================
*/

/*-------------------------------------------------------
Google Fonts
-------------------------------------------------------*/

@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap");


/*-------------------------------------------------------
Variables
-------------------------------------------------------*/

:root{

--ip-primary:#b8925c;

--ip-primary-light:#d4b17c;

--ip-dark:#171717;

--ip-black:#101010;

--ip-white:#ffffff;

--ip-bg:#faf8f5;

--ip-card:#ffffff;

--ip-border:#ece7df;

--ip-text:#555;

--ip-heading:#1d1d1d;

--ip-shadow:0 20px 60px rgba(0,0,0,.08);

--ip-shadow-hover:0 35px 80px rgba(0,0,0,.15);

--ip-radius:22px;

--ip-transition:.45s cubic-bezier(.2,.8,.2,1);

}


/*-------------------------------------------------------
Reset
-------------------------------------------------------*/

.inarche-publications-wrapper *,
.inarche-modal *{

box-sizing:border-box;

margin:0;

padding:0;

}

.inarche-publications-wrapper img,
.inarche-modal img{

display:block;

max-width:100%;

}

.inarche-publications-wrapper a{

text-decoration:none;

color:inherit;

}

.inarche-publications-wrapper button{

font-family:inherit;

cursor:pointer;

}


/*-------------------------------------------------------
Wrapper
-------------------------------------------------------*/

.inarche-publications-wrapper{

position:relative;

padding:90px 0;

font-family:"Inter",sans-serif;

background:var(--ip-bg);

color:var(--ip-heading);

overflow:hidden;

}


/*-------------------------------------------------------
Container
-------------------------------------------------------*/

.inarche-publications-wrapper{

width:100%;

}

.inarche-publications-wrapper::before{

content:"";

position:absolute;

top:-250px;

right:-180px;

width:500px;

height:500px;

background:radial-gradient(circle,var(--ip-primary-light),transparent 70%);

opacity:.08;

pointer-events:none;

}

.inarche-publications-wrapper::after{

content:"";

position:absolute;

bottom:-250px;

left:-180px;

width:500px;

height:500px;

background:radial-gradient(circle,var(--ip-primary),transparent 70%);

opacity:.05;

pointer-events:none;

}


/*-------------------------------------------------------
Section Header
-------------------------------------------------------*/

.inarche-section-header{

text-align:center;

margin:0 auto 70px;

max-width:760px;

padding:0 20px;

}

.inarche-subtitle{

display:inline-block;

margin-bottom:18px;

font-size:13px;

font-weight:600;

letter-spacing:4px;

text-transform:uppercase;

color:var(--ip-primary);

position:relative;

}

.inarche-subtitle::before,
.inarche-subtitle::after{

content:"";

position:absolute;

top:50%;

width:35px;

height:1px;

background:var(--ip-primary);

}

.inarche-subtitle::before{

right:100%;

margin-right:15px;

}

.inarche-subtitle::after{

left:100%;

margin-left:15px;

}

.inarche-section-header h2{

font-family:"Cormorant Garamond",serif;

font-size:58px;

font-weight:600;

line-height:1.1;

letter-spacing:-1px;

color:var(--ip-heading);

margin-bottom:15px;

}


/*-------------------------------------------------------
Grid
-------------------------------------------------------*/

.inarche-grid{

display:grid;

gap:35px;

align-items:stretch;

grid-template-columns:repeat(var(--inarche-columns,3),1fr);

}

.columns-1{

grid-template-columns:1fr;

}

.columns-2{

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

}

.columns-3{

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

}

.columns-4{

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

}


/*-------------------------------------------------------
Responsive
-------------------------------------------------------*/

@media(max-width:1200px){

.columns-4{

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

}

}

@media(max-width:992px){

.columns-4,
.columns-3{

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

}

.inarche-section-header h2{

font-size:46px;

}

}

@media(max-width:768px){

.columns-4,
.columns-3,
.columns-2{

grid-template-columns:1fr;

}

.inarche-publications-wrapper{

padding:70px 0;

}

.inarche-section-header{

margin-bottom:45px;

}

.inarche-section-header h2{

font-size:36px;

}

.inarche-subtitle{

font-size:12px;

letter-spacing:3px;

}

}

@media(max-width:480px){

.inarche-section-header h2{

font-size:30px;

}

}
/*======================================================
Publication Card
======================================================*/

.inarche-card{

position:relative;

display:flex;

flex-direction:column;

background:var(--ip-card);

border-radius:var(--ip-radius);

overflow:hidden;

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

box-shadow:var(--ip-shadow);

transition:all var(--ip-transition);

height:100%;

}

.inarche-card:hover{

transform:translateY(-12px);

box-shadow:var(--ip-shadow-hover);

border-color:rgba(184,146,92,.35);

}


/*======================================================
Image
======================================================*/

.inarche-card-image{

position:relative;

overflow:hidden;

aspect-ratio:4/5;

background:#ececec;

}

.inarche-card-image img{

width:100%;

height:100%;

object-fit:cover;

transition:transform .8s cubic-bezier(.2,.8,.2,1);

}

.inarche-card:hover img{

transform:scale(1.08);

}


/*======================================================
Overlay
======================================================*/

.inarche-card-overlay{

position:absolute;

inset:0;

background:linear-gradient(

180deg,

rgba(0,0,0,0) 0%,

rgba(0,0,0,.15) 40%,

rgba(0,0,0,.55) 100%

);

opacity:.85;

transition:.45s;

}

.inarche-card:hover .inarche-card-overlay{

opacity:1;

}


/*======================================================
Publication Number
======================================================*/

.inarche-card-number{

position:absolute;

left:22px;

top:22px;

width:58px;

height:58px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

background:rgba(255,255,255,.12);

backdrop-filter:blur(16px);

border:1px solid rgba(255,255,255,.25);

font-size:17px;

font-weight:700;

color:#fff;

z-index:5;

transition:.4s;

}

.inarche-card:hover .inarche-card-number{

background:var(--ip-primary);

transform:rotate(360deg);

}


/*======================================================
Category Badge
======================================================*/

.inarche-card-category{

position:absolute;

right:20px;

bottom:20px;

padding:8px 18px;

background:rgba(255,255,255,.15);

backdrop-filter:blur(20px);

border-radius:50px;

border:1px solid rgba(255,255,255,.2);

color:#fff;

font-size:12px;

font-weight:600;

letter-spacing:.8px;

text-transform:uppercase;

z-index:5;

}


/*======================================================
Content
======================================================*/

.inarche-card-content{

display:flex;

flex-direction:column;

padding:30px;

flex:1;

background:#fff;

}


/*======================================================
Meta
======================================================*/

.inarche-card-meta{

display:flex;

align-items:center;

gap:10px;

margin-bottom:18px;

font-size:13px;

color:#888;

font-weight:500;

}


/*======================================================
Title
======================================================*/

.inarche-card-title{

font-family:"Cormorant Garamond",serif;

font-size:34px;

line-height:1.2;

font-weight:600;

color:var(--ip-heading);

margin-bottom:18px;

transition:.35s;

}

.inarche-card:hover .inarche-card-title{

color:var(--ip-primary);

}


/*======================================================
Excerpt
======================================================*/

.inarche-card-excerpt{

font-size:15px;

line-height:1.9;

color:var(--ip-text);

margin-bottom:25px;

flex:1;

}


/*======================================================
Tags
======================================================*/

.inarche-card-tags{

display:flex;

flex-wrap:wrap;

gap:10px;

margin-bottom:30px;

}

.inarche-card-tags span{

padding:8px 14px;

border-radius:40px;

background:#f5f5f5;

font-size:12px;

font-weight:600;

color:#666;

transition:.35s;

}

.inarche-card-tags span:hover{

background:var(--ip-primary);

color:#fff;

}


/*======================================================
Button
======================================================*/

.inarche-read-more{

display:inline-flex;

align-items:center;

justify-content:center;

gap:12px;

padding:15px 28px;

border:none;

border-radius:50px;

background:var(--ip-dark);

color:#fff;

font-size:13px;

font-weight:600;

letter-spacing:1px;

text-transform:uppercase;

transition:.45s;

overflow:hidden;

}

.inarche-read-more svg{

transition:.4s;

}

.inarche-read-more:hover{

background:var(--ip-primary);

transform:translateY(-2px);

}

.inarche-read-more:hover svg{

transform:translateX(6px);

}


/*======================================================
Hover Border
======================================================*/

.inarche-card::before{

content:"";

position:absolute;

inset:0;

border-radius:inherit;

padding:1px;

background:linear-gradient(

135deg,

transparent,

rgba(184,146,92,.45),

transparent

);

-webkit-mask:

linear-gradient(#fff 0 0) content-box,

linear-gradient(#fff 0 0);

-webkit-mask-composite:xor;

mask-composite:exclude;

opacity:0;

transition:.45s;

pointer-events:none;

}

.inarche-card:hover::before{

opacity:1;

}


/*======================================================
Responsive
======================================================*/

@media(max-width:992px){

.inarche-card-title{

font-size:30px;

}

}

@media(max-width:768px){

.inarche-card-content{

padding:24px;

}

.inarche-card-title{

font-size:28px;

}

.inarche-card-number{

width:48px;

height:48px;

font-size:15px;

}

}

@media(max-width:480px){

.inarche-card-content{

padding:22px;

}

.inarche-card-title{

font-size:25px;

}

.inarche-read-more{

width:100%;

}

}
/*======================================================
Premium AJAX Modal
======================================================*/

.inarche-modal{

position:fixed;

inset:0;

display:flex;

align-items:center;

justify-content:center;

padding:40px;

opacity:0;

visibility:hidden;

pointer-events:none;

z-index:99999;

transition:all .4s ease;

}

.inarche-modal.active{

opacity:1;

visibility:visible;

pointer-events:auto;

}


/*======================================================
Backdrop
======================================================*/

.inarche-modal-backdrop{

position:absolute;

inset:0;

background:rgba(0,0,0,.72);

backdrop-filter:blur(12px);

cursor:pointer;

}


/*======================================================
Dialog
======================================================*/

.inarche-modal-dialog{

position:relative;

width:min(1200px,96vw);

max-height:92vh;

max-height:min(92vh,92dvh);

overflow:hidden;

display:flex;

flex-direction:column;

background:#fff;

border-radius:28px;

box-shadow:0 40px 100px rgba(0,0,0,.30);

animation:inarcheModal .45s ease;

z-index:2;

}

@keyframes inarcheModal{

from{

opacity:0;

transform:translateY(40px) scale(.96);

}

to{

opacity:1;

transform:translateY(0) scale(1);

}

}


/*======================================================
Close Button
======================================================*/

.inarche-modal-close{

position:absolute;

top:18px;

right:18px;

width:52px;

height:52px;

border:none;

border-radius:50%;

background:rgba(255,255,255,.92);

color:#222;

font-size:28px;

font-weight:300;

display:flex;

align-items:center;

justify-content:center;

cursor:pointer;

transition:.35s;

z-index:20;

}

.inarche-modal-close:hover{

background:var(--ip-primary);

color:#fff;

transform:rotate(90deg);

}


/*======================================================
Content
======================================================*/

.inarche-modal-content{

flex:1 1 auto;

min-height:0;

overflow-y:auto;

overflow-x:hidden;

-webkit-overflow-scrolling:touch;

background:#fff;

}


/*======================================================
Hero Image
======================================================*/

.inarche-modal-hero{

position:relative;

aspect-ratio:16/8;

overflow:hidden;

background:#eee;

}

.inarche-modal-hero img{

width:100%;

height:100%;

object-fit:cover;

}


/*======================================================
Body
======================================================*/

.inarche-modal-body{

padding:55px;

}

.inarche-modal-title{

font-family:"Cormorant Garamond",serif;

font-size:58px;

font-weight:600;

line-height:1.1;

margin-bottom:18px;

color:var(--ip-heading);

}

.inarche-modal-meta{

display:flex;

flex-wrap:wrap;

gap:18px;

margin-bottom:28px;

font-size:14px;

color:#777;

font-weight:500;

}

.inarche-modal-text{

font-size:17px;

line-height:2;

color:var(--ip-text);

}

.inarche-modal-text p{

margin-bottom:24px;

}

.inarche-modal-text img{

border-radius:14px;

margin:20px 0;

}


/*======================================================
Modal Categories
======================================================*/

.inarche-modal-categories{

display:flex;

flex-wrap:wrap;

gap:10px;

margin-bottom:28px;

}

.inarche-modal-categories span{

padding:8px 16px;

border-radius:40px;

background:#f5f5f5;

font-size:12px;

font-weight:600;

letter-spacing:.4px;

text-transform:uppercase;

color:var(--ip-primary);

}


/*======================================================
Gallery
======================================================*/

.inarche-gallery{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

gap:20px;

margin-top:45px;

}

.inarche-gallery a{

display:block;

overflow:hidden;

border-radius:18px;

box-shadow:0 15px 35px rgba(0,0,0,.08);

transition:.4s;

}

.inarche-gallery a:hover{

transform:translateY(-6px);

}

.inarche-gallery img{

width:100%;

height:240px;

object-fit:cover;

transition:transform .55s ease;

}

.inarche-gallery a:hover img{

transform:scale(1.08);

}


/*======================================================
Loader
======================================================*/

.inarche-loader{

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

padding:100px 40px;

gap:24px;

}

.inarche-spinner{

width:58px;

height:58px;

border-radius:50%;

border:4px solid rgba(184,146,92,.2);

border-top-color:var(--ip-primary);

animation:inarcheSpin .8s linear infinite;

}

@keyframes inarcheSpin{

100%{

transform:rotate(360deg);

}

}


/*======================================================
GLightbox
======================================================*/

.glightbox-clean .gslide-description{

background:#fff;

}

.glightbox-clean .gslide-title{

font-family:"Cormorant Garamond",serif;

font-size:30px;

}

.glightbox-clean .gslide-desc{

font-size:15px;

line-height:1.8;

}


/*======================================================
Responsive
======================================================*/

@media(max-width:992px){

.inarche-modal-body{

padding:40px;

}

.inarche-modal-title{

font-size:46px;

}

}

@media(max-width:768px){

.inarche-modal{

padding:15px;

}

.inarche-modal-dialog{

border-radius:20px;

max-height:96vh;

}

.inarche-modal-body{

padding:28px;

}

.inarche-modal-title{

font-size:34px;

}

.inarche-gallery{

grid-template-columns:1fr 1fr;

gap:15px;

}

}

@media(max-width:480px){

.inarche-modal-body{

padding:22px;

}

.inarche-modal-title{

font-size:28px;

}

.inarche-gallery{

grid-template-columns:1fr;

}

.inarche-modal-close{

width:44px;

height:44px;

font-size:22px;

}

}
/*======================================================
Empty State
======================================================*/

.inarche-empty{

max-width:700px;

margin:80px auto;

padding:70px 40px;

text-align:center;

background:#fff;

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

border-radius:var(--ip-radius);

box-shadow:var(--ip-shadow);

}

.inarche-empty h3{

font-family:"Cormorant Garamond",serif;

font-size:42px;

margin-bottom:18px;

color:var(--ip-heading);

}

.inarche-empty p{

font-size:16px;

line-height:1.9;

color:var(--ip-text);

}


/*======================================================
Fade Animation
======================================================*/

.inarche-fade-up{

opacity:0;

transform:translateY(40px);

transition:

opacity .8s ease,

transform .8s ease;

}

.inarche-fade-up.is-visible{

opacity:1;

transform:none;

}


/*======================================================
Card Hover Glow
======================================================*/

.inarche-card::after{

content:"";

position:absolute;

top:-60%;

left:-60%;

width:120%;

height:120%;

background:

radial-gradient(

circle,

rgba(184,146,92,.18),

transparent 70%

);

opacity:0;

pointer-events:none;

transition:.55s;

}

.inarche-card:hover::after{

opacity:1;

}


/*======================================================
Focus States
======================================================*/

.inarche-read-more:focus,

.inarche-modal-close:focus,

.inarche-gallery a:focus{

outline:3px solid var(--ip-primary);

outline-offset:3px;

}


/*======================================================
Selection
======================================================*/

.inarche-publications-wrapper ::selection,

.inarche-modal ::selection{

background:var(--ip-primary);

color:#fff;

}


/*======================================================
Scrollbar
======================================================*/

.inarche-modal-content::-webkit-scrollbar{

width:10px;

}

.inarche-modal-content::-webkit-scrollbar-track{

background:#f2f2f2;

}

.inarche-modal-content::-webkit-scrollbar-thumb{

background:var(--ip-primary);

border-radius:20px;

}

.inarche-modal-content{

scrollbar-width:thin;

scrollbar-color:var(--ip-primary) #f2f2f2;

}


/*======================================================
Image Loading
======================================================*/

.inarche-card-image{

background:

linear-gradient(

90deg,

#f4f4f4 25%,

#ececec 37%,

#f4f4f4 63%

);

background-size:400% 100%;

animation:inarcheSkeleton 1.3s infinite;

}

.inarche-card-image img{

background:#fff;

}

@keyframes inarcheSkeleton{

0%{

background-position:100% 50%;

}

100%{

background-position:0 50%;

}

}


/*======================================================
Utility
======================================================*/

.inarche-hidden{

display:none!important;

}

.inarche-center{

text-align:center;

}

.inarche-text-right{

text-align:right;

}

.inarche-text-left{

text-align:left;

}


/*======================================================
Spacing Utilities
======================================================*/

.inarche-mt-20{

margin-top:20px;

}

.inarche-mt-40{

margin-top:40px;

}

.inarche-mb-20{

margin-bottom:20px;

}

.inarche-mb-40{

margin-bottom:40px;

}


/*======================================================
Print
======================================================*/

@media print{

.inarche-read-more,

.inarche-modal,

.inarche-card-number{

display:none!important;

}

.inarche-card{

box-shadow:none;

border:1px solid #ccc;

break-inside:avoid;

}

}


/*======================================================
Reduced Motion
======================================================*/

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

*{

animation:none!important;

transition:none!important;

scroll-behavior:auto!important;

}

}


/*======================================================
Large Displays
======================================================*/

@media(min-width:1800px){

.inarche-grid{

gap:50px;

}

.inarche-card-title{

font-size:40px;

}

.inarche-modal-dialog{

max-width:1500px;

}

.inarche-modal-title{

font-size:72px;

}

}