/* ==========================================================
   AVENLLY JOURNAL
   BLOG.CSS
   PART 1
   Foundation • Reset • Typography • Layout • Hero
========================================================== */

/*==============================
ROOT VARIABLES
==============================*/

:root{

--bg:#fbfaf7;
--surface:#ffffff;

--primary:#1f1f1f;
--secondary:#6d6d6d;
--muted:#9c9c9c;

--border:#ece7df;

--accent:#d8ccb6;

--shadow-sm:
0 4px 18px rgba(0,0,0,.04);

--shadow-md:
0 14px 42px rgba(0,0,0,.07);

--shadow-lg:
0 28px 70px rgba(0,0,0,.10);

--radius-sm:10px;
--radius:18px;
--radius-lg:28px;

--transition:
all .35s ease;

--container:1280px;

}


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

*,
*::before,
*::after{

margin:0;
padding:0;
box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

background:var(--bg);

color:var(--primary);

font-family:
Inter,
system-ui,
sans-serif;

font-size:16px;

line-height:1.7;

-webkit-font-smoothing:antialiased;

text-rendering:optimizeLegibility;

overflow-x:hidden;

}

img{

display:block;

max-width:100%;

height:auto;

}

a{

color:inherit;

text-decoration:none;

transition:var(--transition);

}

button{

font:inherit;

cursor:pointer;

border:none;

background:none;

}

input{

font:inherit;

outline:none;

}

ul{

list-style:none;

}


/*==============================
TYPOGRAPHY
==============================*/

h1,
h2,
h3,
h4{

font-family:

"Playfair Display",
Georgia,
serif;

font-weight:700;

letter-spacing:-.02em;

color:var(--primary);

line-height:1.15;

}

h1{

font-size:clamp(44px,6vw,72px);

}

h2{

font-size:clamp(32px,4vw,48px);

}

h3{

font-size:24px;

}

p{

color:var(--secondary);

line-height:1.9;

}

small{

color:var(--muted);

}


/*==============================
GLOBAL LAYOUT
==============================*/

.container{

width:min(92%,var(--container));

margin-inline:auto;

}

.blog-main{

overflow:hidden;

}

section{

padding:72px 0;

position:relative;

}


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

.section-label{

display:inline-flex;

align-items:center;

gap:8px;

font-size:12px;

font-weight:700;

letter-spacing:.18em;

text-transform:uppercase;

color:var(--muted);

margin-bottom:18px;

}

.section-label::before{

content:"";

width:34px;

height:1px;

background:var(--accent);

}


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

.hero-banner{

background:

linear-gradient(

180deg,

#f8f5ef 0%,

#fbfaf7 100%

);

padding:90px 0 80px;

text-align:center;

}

.hero-content{

max-width:760px;

margin:auto;

}

.hero-eyebrow{

display:inline-block;

margin-bottom:18px;

font-size:12px;

font-weight:700;

letter-spacing:.25em;

text-transform:uppercase;

color:#9b8b6c;

}

.hero-title{

max-width:720px;

margin:auto;

font-size:clamp(52px,6vw,78px);

line-height:1.05;

margin-bottom:28px;

}

.hero-excerpt{

max-width:620px;

margin:auto;

font-size:18px;

color:var(--secondary);

line-height:1.9;

}

.hero-rule{

width:90px;

height:2px;

background:var(--accent);

margin:42px auto 0;

border-radius:999px;

}


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

.btn-primary{

display:inline-flex;

align-items:center;

justify-content:center;

padding:14px 28px;

border-radius:999px;

background:#1f1f1f;

color:#fff;

font-size:14px;

font-weight:600;

transition:.35s;

}

.btn-primary:hover{

transform:translateY(-2px);

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

}


/*==============================
IMAGE
==============================*/

img{

border-radius:18px;

}

/*==========================================================
SEARCH
==========================================================*/

.search-section{

padding:42px 0 30px;

}

.search-form{

max-width:680px;

margin:auto;

}

.search-wrapper{

display:flex;

align-items:center;

background:#fff;

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

border-radius:999px;

padding:8px;

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

transition:.3s;

}

.search-wrapper:hover{

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

}

.search-wrapper:focus-within{

border-color:#d9c9af;

box-shadow:
0 0 0 5px rgba(216,204,182,.18);

}

.search-input{

flex:1;

border:none;

background:none;

padding:0 18px;

font-size:15px;

color:var(--primary);

}

.search-input::placeholder{

color:#9d9d9d;

}

.search-btn{

width:48px;

height:48px;

border-radius:50%;

background:#1f1f1f;

color:#fff;

display:flex;

align-items:center;

justify-content:center;

transition:.3s;

flex-shrink:0;

}

.search-btn:hover{

transform:scale(1.06);

background:#000;

}



/*==========================================================
TRENDING
==========================================================*/

.trending-section{

padding-top:10px;

padding-bottom:60px;

}

.trending-pills{

display:flex;

justify-content:center;

flex-wrap:wrap;

gap:14px;

margin-top:18px;

}

.topic-pill{

display:inline-flex;

align-items:center;

justify-content:center;

padding:12px 24px;

border-radius:999px;

background:#fff;

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

font-size:14px;

font-weight:600;

color:var(--primary);

transition:.35s;

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

}

.topic-pill:hover{

background:#1f1f1f;

color:#fff;

border-color:#1f1f1f;

transform:translateY(-3px);

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

}



/*==========================================================
ADVERTISEMENT
==========================================================*/

.ad-section{

padding:32px 0 70px;

}

.ad-leaderboard{

max-width:970px;

margin:auto;

min-height:90px;

border:2px dashed #ddd;

border-radius:18px;

background:#fafafa;

display:flex;

align-items:center;

justify-content:center;

color:#999;

font-size:14px;

font-weight:600;

}



/*==========================================================
EDITOR'S PICK
==========================================================*/

.editors-pick{

padding:90px 0;

}

.editors-wrapper{

display:grid;

grid-template-columns:

1.1fr

1fr;

gap:60px;

align-items:center;

}

.editors-image{

position:relative;

overflow:hidden;

border-radius:28px;

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

}

.editors-image img{

width:100%;

height:640px;

object-fit:cover;

transition:.45s;

}

.editors-image:hover img{

transform:scale(1.04);

}

.editors-text{

max-width:560px;

}

.editors-label{

display:inline-block;

padding:8px 16px;

border-radius:999px;

background:#efe7d7;

font-size:12px;

font-weight:700;

letter-spacing:.12em;

text-transform:uppercase;

color:#8c7654;

margin-bottom:20px;

}

.post-category{

display:inline-block;

margin-bottom:18px;

font-size:13px;

font-weight:600;

color:#9c8561;

text-transform:uppercase;

letter-spacing:.12em;

}

.editors-title{

font-size:clamp(38px,5vw,60px);

line-height:1.08;

margin-bottom:18px;

}

.post-meta{

display:flex;

align-items:center;

gap:12px;

font-size:14px;

color:#8f8f8f;

margin-bottom:22px;

}

.editors-excerpt{

font-size:18px;

line-height:1.9;

margin-bottom:36px;

color:var(--secondary);

}

.btn-large{

padding:

16px 34px;

font-size:15px;

}



/*==========================================================
IMAGE EFFECTS
==========================================================*/

.post-image-link{

overflow:hidden;

display:block;

border-radius:22px;

}

.post-image-link img{

transition:.45s;

}

.post-image-link:hover img{

transform:scale(1.05);

}



/*==========================================================
SMALL LAPTOP
==========================================================*/

@media (max-width:1100px){

.editors-wrapper{

grid-template-columns:1fr;

gap:45px;

}

.editors-image img{

height:560px;

}

.editors-text{

max-width:100%;

}

}



/*==========================================================
TABLET
==========================================================*/

@media (max-width:768px){

.search-wrapper{

padding:6px;

}

.search-btn{

width:44px;

height:44px;

}

.editors-pick{

padding:70px 0;

}

.editors-image img{

height:480px;

}

.editors-title{

font-size:42px;

}

}



/*==========================================================
MOBILE
==========================================================*/

@media (max-width:480px){

.search-input{

font-size:14px;

padding:0 14px;

}

.topic-pill{

font-size:13px;

padding:10px 18px;

}

.editors-image img{

height:360px;

}

.editors-title{

font-size:34px;

}

.editors-excerpt{

font-size:16px;

}

}

/*==========================================================
PART 3
LATEST STORIES
POST CARDS
SIDEBAR
==========================================================*/


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

.content-section{

padding:90px 0;

}

.content-grid{

display:grid;

grid-template-columns:
minmax(0,2fr)
340px;

gap:64px;

align-items:start;

}


/*==============================
LATEST STORIES
==============================*/

.latest-stories{

width:100%;

}

.section-title{

font-size:42px;

margin-bottom:40px;

line-height:1.15;

}

.posts-grid{

display:grid;

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

gap:36px;

}


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

.post-card{

background:#fff;

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

border-radius:24px;

overflow:hidden;

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

transition:.35s;

height:100%;

display:flex;

flex-direction:column;

}

.post-card:hover{

transform:translateY(-8px);

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

}

.post-image-link{

display:block;

overflow:hidden;

}

.post-image-link img{

width:100%;

height:280px;

object-fit:cover;

transition:.45s;

}

.post-card:hover img{

transform:scale(1.05);

}

.post-content{

padding:26px;

display:flex;

flex-direction:column;

flex:1;

}

.post-category{

display:inline-block;

margin-bottom:14px;

font-size:12px;

font-weight:700;

text-transform:uppercase;

letter-spacing:.14em;

color:#9b8463;

}

.post-title{

font-size:28px;

line-height:1.2;

margin-bottom:14px;

}

.post-title a{

transition:.3s;

}

.post-title a:hover{

color:#8d7654;

}

.post-meta{

display:flex;

gap:12px;

font-size:13px;

color:#8d8d8d;

margin-bottom:18px;

}

.post-excerpt{

font-size:15px;

color:var(--secondary);

line-height:1.8;

display:-webkit-box;

-webkit-line-clamp:3;

-webkit-box-orient:vertical;

overflow:hidden;

margin-bottom:24px;

}

.read-more{

margin-top:auto;

font-weight:600;

font-size:14px;

display:inline-flex;

align-items:center;

gap:8px;

}

.read-more:hover{

gap:14px;

}


/*==============================
EMPTY STATE
==============================*/

.empty-state{

padding:80px 40px;

text-align:center;

background:#fff;

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

border-radius:24px;

}

.empty-state h3{

margin-bottom:12px;

font-size:30px;

}

.empty-state p{

max-width:480px;

margin:auto;

}


/*==============================
SIDEBAR
==============================*/

.sidebar-sticky{

position:sticky;

top:120px;

display:flex;

flex-direction:column;

gap:28px;

}


/*==============================
WIDGET
==============================*/

.widget{

background:#fff;

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

border-radius:22px;

padding:28px;

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

}

.widget-title{

font-size:24px;

margin-bottom:22px;

}


/*==============================
SEARCH WIDGET
==============================*/

.widget-search-form{

display:flex;

align-items:center;

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

border-radius:999px;

padding:6px;

}

.widget-search-form input{

flex:1;

border:none;

padding:12px 16px;

background:none;

font-size:14px;

}

.widget-search-form button{

width:42px;

height:42px;

border-radius:50%;

background:#1f1f1f;

color:#fff;

display:flex;

align-items:center;

justify-content:center;

}


/*==============================
RECENT POSTS
==============================*/

.recent-posts-list{

display:flex;

flex-direction:column;

gap:20px;

}

.recent-post-item{

display:flex;

gap:16px;

align-items:center;

transition:.3s;

}

.recent-post-item:hover{

transform:translateX(5px);

}

.recent-post-thumb{

flex-shrink:0;

}

.recent-post-thumb img{

width:82px;

height:82px;

object-fit:cover;

border-radius:14px;

}

.recent-post-title{

font-size:15px;

font-weight:600;

line-height:1.45;

}


/*==============================
CATEGORY WIDGET
==============================*/

.widget-category-list{

display:flex;

flex-direction:column;

gap:12px;

}

.widget-category-list a{

display:flex;

justify-content:space-between;

align-items:center;

padding:12px 0;

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

transition:.3s;

}

.widget-category-list a:last-child{

border-bottom:none;

}

.widget-category-list a:hover{

padding-left:8px;

color:#8b7455;

}


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

@media(max-width:1200px){

.content-grid{

grid-template-columns:1fr;

}

.sidebar-sticky{

position:relative;

top:0;

}

}

@media(max-width:768px){

.posts-grid{

grid-template-columns:1fr;

gap:28px;

}

.section-title{

font-size:34px;

}

.post-image-link img{

height:240px;

}

.widget{

padding:22px;

}

}

@media(max-width:480px){

.content-section{

padding:70px 0;

}

.post-content{

padding:20px;

}

.post-title{

font-size:24px;

}

.recent-post-thumb img{

width:72px;

height:72px;

}

.widget-title{

font-size:22px;

}

}

/*==========================================================
PART 4
COLLECTIONS
NEWSLETTER
FOOTER CTA
FOOTER
==========================================================*/


/*==============================
COLLECTIONS
==============================*/

.collections-section{

padding:100px 0;

background:#f8f6f2;

}

.collections-grid{

display:grid;

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

gap:28px;

margin-top:50px;

}

.collection-card{

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

padding:42px 28px;

background:#fff;

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

border-radius:24px;

text-align:center;

transition:.35s;

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

min-height:220px;

}

.collection-card:hover{

transform:translateY(-8px);

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

border-color:#d9ccb5;

}

.collection-name{

font-family:

"Playfair Display",
Georgia,
serif;

font-size:28px;

font-weight:700;

margin-bottom:12px;

color:var(--primary);

}

.collection-count{

font-size:14px;

color:var(--secondary);

}



/*==============================
NEWSLETTER
==============================*/

.newsletter-box{

max-width:960px;

margin:auto;

padding:70px;

background:#ffffff;

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

border-radius:32px;

text-align:center;

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

}

.newsletter-box h2{

font-size:48px;

margin-bottom:18px;

}

.newsletter-box p{

max-width:640px;

margin:0 auto 40px;

font-size:17px;

}

.newsletter-box form{

display:flex;

justify-content:center;

gap:14px;

flex-wrap:wrap;

}

.newsletter-box input{

flex:1;

min-width:280px;

max-width:520px;

height:58px;

padding:0 22px;

background:#fafafa;

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

border-radius:999px;

font-size:15px;

}

.newsletter-box input:focus{

border-color:#c9b48d;

box-shadow:
0 0 0 4px rgba(201,180,141,.15);

}

.newsletter-box button{

height:58px;

padding:0 34px;

border:none;

border-radius:999px;

background:#1f1f1f;

color:#fff;

font-weight:600;

transition:.3s;

}

.newsletter-box button:hover{

transform:translateY(-2px);

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

}



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

.footer-cta{

max-width:960px;

margin:auto;

padding:80px 60px;

text-align:center;

background:

linear-gradient(
180deg,
#ffffff,
#f7f4ee
);

border-radius:34px;

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

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

}

.footer-cta h2{

font-size:54px;

margin-bottom:20px;

}

.footer-cta p{

max-width:650px;

margin:auto;

margin-bottom:36px;

font-size:17px;

}

.footer-cta .btn-primary{

padding:18px 38px;

}



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

footer{

margin-top:90px;

padding:70px 0 40px;

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

background:#fbfaf7;

}

.footer-inner{

display:flex;

justify-content:space-between;

align-items:center;

gap:30px;

flex-wrap:wrap;

}

.footer-logo{

font-family:

"Playfair Display",
Georgia,
serif;

font-size:28px;

font-weight:700;

}

.footer-nav{

display:flex;

gap:26px;

flex-wrap:wrap;

}

.footer-nav a{

font-size:15px;

color:var(--secondary);

transition:.3s;

}

.footer-nav a:hover{

color:var(--primary);

}

.footer-copy{

width:100%;

margin-top:34px;

text-align:center;

font-size:14px;

color:#9b9b9b;

}



/*==============================
GLOBAL ANIMATIONS
==============================*/

.post-card,
.collection-card,
.widget,
.newsletter-box,
.footer-cta{

animation:fadeUp .7s ease both;

}

@keyframes fadeUp{

from{

opacity:0;

transform:translateY(35px);

}

to{

opacity:1;

transform:translateY(0);

}

}



/*==============================
SCROLLBAR
==============================*/

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#f3f3f3;

}

::-webkit-scrollbar-thumb{

background:#c8b79d;

border-radius:999px;

}

::-webkit-scrollbar-thumb:hover{

background:#a88d65;

}



/*==============================
TABLET
==============================*/

@media(max-width:992px){

.collections-grid{

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

}

.newsletter-box{

padding:55px 40px;

}

.footer-cta{

padding:60px 40px;

}

.footer-cta h2{

font-size:42px;

}

}



/*==============================
MOBILE
==============================*/

@media(max-width:768px){

.collections-grid{

grid-template-columns:1fr;

}

.collection-card{

min-height:180px;

}

.newsletter-box{

padding:40px 25px;

}

.newsletter-box h2{

font-size:34px;

}

.newsletter-box form{

flex-direction:column;

}

.newsletter-box input{

max-width:100%;

width:100%;

}

.newsletter-box button{

width:100%;

}

.footer-cta{

padding:45px 25px;

}

.footer-cta h2{

font-size:34px;

}

.footer-inner{

flex-direction:column;

text-align:center;

}

.footer-nav{

justify-content:center;

}

}

/*==========================================================
PART 5
FINAL POLISH
PERFORMANCE
ACCESSIBILITY
RESPONSIVE
==========================================================*/


/*==============================
FOCUS STATES
==============================*/

a:focus-visible,
button:focus-visible,
input:focus-visible{

outline:3px solid #d6c3a0;

outline-offset:3px;

border-radius:8px;

}



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

::selection{

background:#e7dbc7;

color:#1f1f1f;

}



/*==============================
SMOOTH IMAGES
==============================*/

img{

image-rendering:auto;

backface-visibility:hidden;

transform:translateZ(0);

}



/*==============================
IMAGE LOADING
==============================*/

.post-image-link,
.editors-image,
.recent-post-thumb{

background:#f5f5f5;

}



/*==============================
TRANSITIONS
==============================*/

a,
button,
img,
.post-card,
.collection-card,
.widget,
.topic-pill{

transition:

background .3s,

color .3s,

border-color .3s,

box-shadow .35s,

transform .35s;

}



/*==============================
UTILITY
==============================*/

.text-center{

text-align:center;

}

.mt-0{

margin-top:0;

}

.mb-0{

margin-bottom:0;

}

.hidden{

display:none !important;

}

.w-100{

width:100%;

}



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

.post-image-link img,
.editors-image img,
.recent-post-thumb img{

max-width:100%;

height:auto;

display:block;

}



/*==============================
VIDEO
==============================*/

video{

display:block;

width:100%;

border-radius:20px;

}



/*==============================
TABLES
==============================*/

table{

width:100%;

border-collapse:collapse;

}

table td,
table th{

padding:14px;

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

}



/*==============================
CODE
==============================*/

pre,
code{

font-family:

Consolas,
monospace;

}



/*==============================
REDUCED MOTION
==============================*/

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

*{

animation:none !important;

transition:none !important;

scroll-behavior:auto !important;

}

}



/*==============================
PRINT
==============================*/

@media print{

header,
footer,
.search-section,
.newsletter-box,
.ad-section{

display:none;

}

body{

background:#fff;

color:#000;

}

.post-card{

break-inside:avoid;

box-shadow:none;

}

}



/*==============================
DESKTOP LARGE
==============================*/

@media(min-width:1600px){

.container{

max-width:1380px;

}

.hero-title{

font-size:86px;

}

}



/*==============================
LAPTOP
==============================*/

@media(max-width:1280px){

.container{

width:min(94%,1200px);

}

}



/*==============================
TABLET
==============================*/

@media(max-width:992px){

.hero-title{

font-size:56px;

}

.section-title{

font-size:38px;

}

}



/*==============================
MOBILE
==============================*/

@media(max-width:640px){

section{

padding:56px 0;

}

.hero-banner{

padding:70px 0;

}

.hero-title{

font-size:42px;

line-height:1.12;

}

.hero-excerpt{

font-size:16px;

}

.post-title{

font-size:24px;

}

.newsletter-box h2{

font-size:30px;

}

.footer-cta h2{

font-size:30px;

}

}



/*==============================
SMALL MOBILE
==============================*/

@media(max-width:380px){

.container{

width:92%;

}

.hero-title{

font-size:34px;

}

.post-title{

font-size:22px;

}

.newsletter-box{

padding:30px 20px;

}

.footer-cta{

padding:36px 20px;

}

}



/*==============================
END
==============================*/