/* ---------- Base ---------- */
  
*{
box-sizing:border-box;
margin:0;
padding:0;
}

body{
font-family:'Martian Mono', monospace;
font-optical-sizing:auto;
line-height:1.6;
background:#fff;
color:#222;
text-rendering:optimizeLegibility;
-webkit-font-smoothing:antialiased;
}

.content{
max-width:700px;
margin:auto;
padding:30px;
}

/* ---------- Typography ---------- */
  
@font-face {
font-family: "Communist";
src: url("fonts/Communist.woff2") format("woff2");
}

h2,h3{
font-family:'Communist', sans-serif;
letter-spacing:1px;
}

h2{
margin-top:40px;
margin-bottom:10px;
border-bottom:2px solid #ddd;
padding-bottom:5px;
}

p{
margin-bottom:14px;
}

/* ---------- Hero banner ---------- */

.hero-banner{
position:relative;
width:100%;
height:40vh;
min-height:250px;
background:url('images/bandeau.jpg') center/cover no-repeat;
}

.hero-text{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
display:flex;
align-items:center;
gap:20px;
color:white;
}

.hero-logo{
width:100px;
height:100px;
}

.hero-title h1{
font-size:3rem;
text-shadow:2px 2px 6px rgba(0,0,0,0.6);
}

.hero-title p{
font-size:1.2rem;
text-shadow:1px 1px 4px rgba(0,0,0,0.6);
}

/* ---------- Buttons ---------- */

.button{
display:inline-block;
padding:12px 24px;
background:#ffbd59;
border:2px solid #ffa824;
border-radius:6px;
color:white;
text-decoration:none;
font-weight:bold;
transition:all .25s ease;
}

.button:hover{
background:white;
color:#ffa824;
transform:translateY(-1px);
}

.button:active{
transform:scale(.97);
}

.center{
text-align:center;
margin:20px 0;
}

/* ---------- Event ---------- */

.event{
margin-bottom:25px;
}

.date{
font-weight:600;
}

/* ---------- Philosophy box ---------- */

.philo-card{
position:relative;
border-radius:10px;
padding:20px;
margin-top:40px;
overflow:hidden;
cursor:pointer;
background:
linear-gradient(rgba(255,205,130,.95),rgba(255,205,130,.95)),
url("images/paper_texture.png");
background-size:cover;
}

/* short text */
.philo-short{
transition:opacity .4s ease;
}

.hint{
font-size:.8rem;
opacity:.6;
margin-top:10px;
}

/* long version */
.philo-long{
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
padding:20px;
background:#FFE1B8;
transform:translateY(100%);
transition:transform .45s cubic-bezier(.2,.8,.2,1);
overflow:auto;
}

.philo-header{
font-family:"Communist", sans-serif;
text-align:center;
font-size:1.4rem;
margin:10px 0 15px 0;
color:#2b2b2b;
}

/* top ornament */
.philo-header::before{
content:"❧═══❦═══❧═══❦";
display:block;
margin-bottom:6px;
font-size:0.9rem;
letter-spacing:3px;
color:#7a5b2b;
}

/* bottom ornament */
.philo-header::after{
content:"❦═══❧═══❦═══❧";
display:block;
margin-top:6px;
font-size:0.9rem;
letter-spacing:3px;
color:#7a5b2b;
}

/* ink reveal animation */
.philo-card:hover .philo-long,
.philo-card:active .philo-long{
transform:translateY(0);
}
.philo-card:hover .philo-short{
opacity:.15;
}
.philo-card:hover{
transform:translateY(-3px);
box-shadow:0 6px 14px rgba(0,0,0,.15);
}

/* ---------- Images ---------- */
img{
max-width:100%;
height:auto;
}

/* ---------- Map ---------- */
#map{
max-width:350px;
height:150px;
margin:20px auto;
}

/* ---------- Footer ---------- */
footer{
margin-top:40px;
font-size:.9rem;
color:gray;
}

/* ---------- Mobile ---------- */
@media(max-width:600px){

.hero-text{
flex-direction:column;
text-align:center;
}
.hero-logo{
width:65px;
height:65px;
}
.hero-title h1{
font-size:1.8rem;
}
.button{
width:100%;
max-width:280px;
}

}