/*==================================================
RESET
==================================================*/

*{

margin:0;

padding:0;

box-sizing:border-box;

}

body{

background:#FAF8F4;

color:#222;

font-family:Inter,sans-serif;

overflow-x:hidden;

}


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

.academy-hero{

position:relative;

min-height:100vh;

display:flex;

justify-content:center;

align-items:center;

text-align:center;

padding:80px 30px;

overflow:hidden;

background:#FAF8F4;

}


/*==================================================
BACKGROUND
==================================================*/

.academy-hero::before{

content:"";

position:absolute;

inset:0;

background:

radial-gradient(
    circle at top,
    rgba(200,161,90,.10),
    transparent 55%
),

url("../images/gallery/full/gallery-hero.png");

background-size:cover;

background-position:center;

background-repeat:no-repeat;

opacity:.18;

transform:scale(1.05);

z-index:0;

}


/*==================================================
CONTENT
==================================================*/

.academy-hero-content{

position:relative;

z-index:2;

max-width:900px;

}


/*==================================================
LABEL
==================================================*/

.academy-label{

display:block;

letter-spacing:6px;

font-size:.82rem;

text-transform:uppercase;

color:#C8A15A;

margin-bottom:24px;

}


/*==================================================
TITLE
==================================================*/

.academy-hero h1{

font-family:"Cormorant Garamond",serif;

font-size:5rem;

font-weight:500;

line-height:1.08;

margin-bottom:30px;

color:#222;

}


/*==================================================
TEXT
==================================================*/

.academy-hero p{

max-width:650px;

margin:auto;

font-size:1.18rem;

line-height:1.9;

color:#666;

}


/*==================================================
META
==================================================*/

.academy-meta{

margin-top:40px;

display:flex;

justify-content:center;

align-items:center;

gap:18px;

font-size:.95rem;

letter-spacing:1px;

color:#8a8a8a;

}


/*==================================================
BUTTON
==================================================*/

.academy-button{

display:inline-block;

margin-top:55px;

padding:18px 42px;

border-radius:999px;

text-decoration:none;

background:#2F4F46;

color:white;

font-weight:600;

transition:.35s;

box-shadow:

0 18px 40px rgba(47,79,70,.25);

}

.academy-button:hover{

background:#C8A15A;

transform:translateY(-4px);

box-shadow:

0 25px 55px rgba(200,161,90,.30);

}


/*==================================================
RESPONSIVE
==================================================*/

@media(max-width:900px){

.academy-hero h1{

font-size:3.6rem;

}

.academy-hero p{

font-size:1.05rem;

}

.academy-meta{

flex-direction:column;

gap:8px;

}

}

/*==================================================
CONTAINER
==================================================*/

.academy-container{

width:min(900px,90%);

margin:auto;

}


/*==================================================
INTRODUCTION
==================================================*/

.academy-intro{

padding:140px 0;

text-align:center;

background:#FAF8F4;

}


.section-label{

display:block;

letter-spacing:5px;

font-size:.8rem;

text-transform:uppercase;

color:#C8A15A;

margin-bottom:22px;

}


.academy-intro h2{

font-family:"Cormorant Garamond",serif;

font-size:3rem;

font-weight:500;

margin-bottom:30px;

color:#222;

}


.academy-intro p{

max-width:720px;

margin:0 auto 24px;

font-size:1.12rem;

line-height:2;

color:#666;

}


/*==================================================
RESPONSIVE
==================================================*/

@media(max-width:900px){

.academy-intro{

padding:90px 0;

}

.academy-intro h2{

font-size:2.3rem;

}

}

/*==================================================
JOURNEY
==================================================*/

.academy-journey{

padding:140px 0;

background:#F6F2EB;

text-align:center;

}

.academy-journey h2{

font-family:"Cormorant Garamond",serif;

font-size:3rem;

font-weight:500;

margin-bottom:25px;

}

.journey-intro{

max-width:720px;

margin:0 auto 80px;

line-height:2;

color:#666;

font-size:1.08rem;

}


/*==================================================
TIMELINE
==================================================*/

.journey-line{

position:relative;

width:min(650px,90%);

margin:auto;

padding-left:70px;

}

.journey-line::before{

content:"";

position:absolute;

left:20px;

top:0;

bottom:0;

width:2px;

background:rgba(200,161,90,.35);

}


/*==================================================
STOP
==================================================*/

.journey-stop{

position:relative;

text-align:left;

margin-bottom:55px;

padding-left:35px;

}

.journey-stop::before{

content:"";

position:absolute;

left:-22px;

top:10px;

width:18px;

height:18px;

border-radius:50%;

background:#C8A15A;

box-shadow:

0 0 0 8px rgba(200,161,90,.15);

}

.lesson-number{

display:block;

font-size:.78rem;

letter-spacing:3px;

text-transform:uppercase;

color:#C8A15A;

margin-bottom:10px;

font-weight:600;

}

.journey-stop h3{

font-family:"Cormorant Garamond",serif;

font-size:2rem;

font-weight:500;

margin-bottom:8px;

}

.journey-stop p{

color:#666;

font-style:italic;

}

/*==================================================
THINKERS
==================================================*/

.academy-thinkers{

padding:150px 0;

background:#FAF8F4;

text-align:center;

}

.academy-thinkers h2{

font-family:"Cormorant Garamond",serif;

font-size:3rem;

font-weight:500;

margin-bottom:70px;

}


/*==================================================
GRID
==================================================*/

.thinkers-grid{

display:grid;

grid-template-columns:

repeat(auto-fit,minmax(320px,1fr));

gap:45px;

}


/*==================================================
CARD
==================================================*/

.thinker-card{

background:white;

border-radius:24px;

overflow:hidden;

box-shadow:

0 18px 45px rgba(0,0,0,.06);

transition:.45s;

}

.thinker-card:hover{

transform:translateY(-10px);

box-shadow:

0 28px 70px rgba(0,0,0,.12);

}

/*==================================================
IMAGE
==================================================*/
.thinker-card img {
    width: 100%;
    height: 360px;

    object-fit: cover;
    object-position: center 20%;

    transition: .7s;
}

/*==================================================
CONTENT
==================================================*/

.thinker-content{

padding:35px;

text-align:left;

}

.thinker-lesson{

display:block;

font-size:.8rem;

letter-spacing:4px;

text-transform:uppercase;

color:#C8A15A;

margin-bottom:14px;

}

.thinker-content h3{

font-family:"Cormorant Garamond",serif;

font-size:2rem;

font-weight:500;

margin-bottom:8px;

}

.thinker-content h4{

font-style:italic;

font-weight:400;

color:#666;

margin-bottom:22px;

}

.thinker-content p{

line-height:1.9;

color:#666;

margin-bottom:28px;

}


/*==================================================
LINK
==================================================*/

.thinker-link{

text-decoration:none;

color:#2F4F46;

font-weight:600;

transition:.3s;

}

.thinker-link:hover{

color:#C8A15A;

}

/*==================================================
COMPASS
==================================================*/

.academy-compass{

padding:170px 0;

background:#F6F2EB;

text-align:center;

}

.compass-intro{

max-width:700px;

margin:25px auto 90px;

line-height:2;

color:#666;

}

.compass{

position:relative;

width:700px;

height:700px;

margin:auto;

}

.axis{

position:absolute;

background:#C8A15A;

opacity:.28;

}

.axis.vertical{

left:50%;

top:0;

width:2px;

height:100%;

transform:translateX(-50%);

}

.axis.horizontal{

top:50%;

left:0;

height:2px;

width:100%;

transform:translateY(-50%);

}

.compass-center{

position:absolute;

left:50%;

top:50%;

transform:translate(-50%,-50%);

width:110px;

height:110px;

border-radius:50%;

background:#2F4F46;

color:white;

display:flex;

justify-content:center;

align-items:center;

font-family:"Cormorant Garamond",serif;

font-size:1.6rem;

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

}

.direction{

position:absolute;

width:220px;

}

.direction h3{

font-family:"Cormorant Garamond",serif;

font-size:2rem;

color:#2F4F46;

margin-bottom:15px;

}

.direction p{

line-height:1.8;

color:#666;

}

.north{

left:50%;

top:40px;

transform:translateX(-50%);

}

.south{

left:50%;

bottom:40px;

transform:translateX(-50%);

}

.west{

left:-20px;

top:50%;

transform:translateY(-50%);

text-align:right;

}

.east{

right:-20px;

top:50%;

transform:translateY(-50%);

text-align:left;

}

/*==================================================
INVITATION
==================================================*/

.academy-invitation{

padding:170px 0;

background:#FAF8F4;

text-align:center;

}

.academy-invitation h2{

font-family:"Cormorant Garamond",serif;

font-size:3.2rem;

font-weight:500;

margin-bottom:40px;

color:#222;

}

.invitation-text{

max-width:720px;

margin:0 auto 22px;

font-size:1.15rem;

line-height:2;

color:#666;

}

.academy-reading{

margin-top:45px;

font-size:.95rem;

letter-spacing:1px;

color:#888;

}

.academy-reading strong{

color:#2F4F46;

font-weight:600;

}