/* Mad4Travel.in — Editorial & Refined design system
   Premium travel publication aesthetic. Mobile-first, fast (one display webfont, system sans fallback). */

:root{
  --ink:#16130f;          /* near-black, warm */
  --ink-soft:#4a443d;     /* body on paper */
  --muted:#857c70;        /* captions, meta */
  --paper:#ffffff;
  --bg:#faf8f4;           /* warm off-white page */
  --stone:#ece7df;        /* image fallback / surfaces */
  --line:#e3ddd2;         /* hairlines */
  --accent:#b4541e;       /* burnt sienna, used sparingly */
  --accent-ink:#7d3a14;
  --maxw:1240px;
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink-soft);
  font-family:var(--sans);font-size:18px;line-height:1.75;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;display:block}
a{color:var(--ink);text-decoration:none}
a:hover{color:var(--accent-ink)}
h1,h2,h3,h4{font-family:var(--serif);color:var(--ink);font-weight:400;line-height:1.12;letter-spacing:-.01em;margin:0 0 .4em}
h1{font-size:clamp(2.1rem,5vw,3.6rem)}
h2{font-size:clamp(1.5rem,3vw,2.1rem)}
h3{font-size:1.2rem;line-height:1.2}
p{margin:0 0 1.1em}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.narrow{max-width:760px}
.kicker{font-family:var(--sans);text-transform:uppercase;letter-spacing:.18em;font-size:.72rem;font-weight:600;color:var(--accent-ink)}
.eyebrow{font-family:var(--sans);text-transform:uppercase;letter-spacing:.16em;font-size:.7rem;font-weight:600;color:var(--muted)}
.lede{font-size:1.22rem;line-height:1.6;color:var(--ink-soft);font-family:var(--serif);font-style:italic}
.skip-link{position:absolute;left:-999px}.skip-link:focus{left:12px;top:12px;background:#fff;padding:10px;z-index:60}
.ed-img{background-color:var(--stone);background-size:cover;background-position:center;width:100%;height:100%}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(250,248,244,.92);backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid var(--line)}
.header-inner{display:flex;align-items:center;gap:24px;height:72px}
.brand{font-family:var(--serif);font-size:1.32rem;font-weight:400;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);white-space:nowrap}
.brand span{color:var(--accent)}
.primary-nav{margin-left:auto}
.primary-nav ul{list-style:none;display:flex;gap:26px;margin:0;padding:0;align-items:center}
.primary-nav a{font-size:.84rem;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--ink)}
.primary-nav a:hover{color:var(--accent-ink)}
.nav-search{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:999px;padding:7px 14px;color:var(--muted);font-size:.82rem;background:var(--paper)}
.nav-toggle{display:none;margin-left:auto;background:none;border:1px solid var(--line);border-radius:8px;padding:8px 12px;font-weight:600}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:74vh;display:flex;align-items:flex-end;color:#fff;overflow:hidden}
.hero .ed-img{position:absolute;inset:0;height:100%}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,8,6,.12) 0%,rgba(10,8,6,.62) 78%,rgba(10,8,6,.78) 100%)}
.hero-inner{position:relative;z-index:2;padding:0 0 64px;max-width:760px}
.hero .kicker{color:#f2d9c6}
.hero h1{color:#fff;margin:.2em 0 .3em;font-size:clamp(2.4rem,6vw,4.4rem)}
.hero p{color:rgba(255,255,255,.92);font-size:1.15rem;max-width:56ch}
.hero .byline{color:rgba(255,255,255,.8);font-size:.82rem;text-transform:uppercase;letter-spacing:.12em;margin-top:14px}
.btn{display:inline-block;background:var(--accent);color:#fff;font-weight:600;font-size:.9rem;letter-spacing:.03em;padding:13px 26px;border-radius:2px}
.btn:hover{background:var(--accent-ink);color:#fff}
.btn-ghost{background:transparent;border:1px solid rgba(255,255,255,.7);color:#fff;margin-left:10px}
.hero-cta{margin-top:26px}

/* ---------- Section rhythm ---------- */
.section{padding:72px 0}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:34px;border-bottom:1px solid var(--line);padding-bottom:14px}
.section-head h2{margin:0}
.section-head .more{font-family:var(--sans);font-size:.8rem;text-transform:uppercase;letter-spacing:.12em;font-weight:600;color:var(--accent-ink);white-space:nowrap}

/* ---------- Magazine feature grid ---------- */
.feature-grid{display:grid;grid-template-columns:2fr 1fr;gap:28px}
.feat-lead{position:relative;border-radius:3px;overflow:hidden;min-height:420px;display:flex;align-items:flex-end;color:#fff}
.feat-lead .ed-img{position:absolute;inset:0;height:100%}
.feat-lead::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.66))}
.feat-lead .cap{position:relative;z-index:2;padding:28px}
.feat-lead h3{color:#fff;font-size:1.9rem}
.feat-side{display:flex;flex-direction:column;gap:22px}
.story{display:grid;grid-template-columns:96px 1fr;gap:16px;align-items:center}
.story .ed-img{height:96px;border-radius:3px}
.story .kicker{font-size:.64rem}
.story h3{font-size:1.05rem;margin:.2em 0 0;font-family:var(--serif)}

/* ---------- Card grids ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:30px}
.card{display:block;color:var(--ink)}
.card .ed-img{height:200px;border-radius:3px;margin-bottom:14px;transition:transform .5s ease}
.card:hover .ed-img{transform:scale(1.03)}
.card .kicker{font-size:.66rem}
.card h3{margin:.35em 0 .25em;font-size:1.25rem}
.card p{font-size:.95rem;color:var(--muted);margin:0;font-family:var(--sans)}
.card.overlay{position:relative;min-height:300px;display:flex;align-items:flex-end;overflow:hidden;border-radius:3px;color:#fff}
.card.overlay .ed-img{position:absolute;inset:0;height:100%;margin:0}
.card.overlay::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.62))}
.card.overlay .cap{position:relative;z-index:2;padding:22px}
.card.overlay h3{color:#fff}

/* ---------- Plan band / pills ---------- */
.band{background:var(--ink);color:#fff}
.band h2{color:#fff}
.band .eyebrow{color:#e7b48f}
.pills{list-style:none;display:flex;flex-wrap:wrap;gap:12px;padding:0;margin:18px 0 0}
.pills a{display:inline-block;border:1px solid rgba(255,255,255,.28);color:#fff;border-radius:999px;padding:10px 20px;font-size:.85rem;font-weight:500}
.pills a:hover{background:#fff;color:var(--ink)}

/* ---------- Breadcrumbs ---------- */
.breadcrumbs{padding:22px 0 0}
.breadcrumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;font-size:.78rem;letter-spacing:.04em;color:var(--muted);font-family:var(--sans);text-transform:uppercase}
.breadcrumbs li:not(:last-child)::after{content:"/";margin-left:8px;color:var(--line)}
.breadcrumbs a{color:var(--muted)}

/* ---------- Page head ---------- */
.page-head{padding:40px 0 10px}
.page-head h1{margin:.15em 0 .25em}

/* ---------- Hub ---------- */
.hub-hero{position:relative;min-height:52vh;display:flex;align-items:flex-end;color:#fff;overflow:hidden}
.hub-hero .ed-img{position:absolute;inset:0;height:100%}
.hub-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.1),rgba(0,0,0,.66))}
.hub-hero .inner{position:relative;z-index:2;padding:0 0 48px}
.hub-hero h1{color:#fff}
.hub-layout{display:grid;grid-template-columns:1fr 300px;gap:54px;padding:54px 0}
.factbox{border:1px solid var(--line);border-radius:3px;background:var(--paper);padding:22px}
.factbox h3{font-size:.95rem;text-transform:uppercase;letter-spacing:.1em;font-family:var(--sans);font-weight:600;color:var(--muted)}
.factbox dl{display:grid;grid-template-columns:1fr;gap:10px;margin:14px 0 0}
.factbox .frow{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line);padding-bottom:8px;font-size:.92rem}
.aside-cta{margin-top:24px;background:var(--ink);color:#fff;border-radius:3px;padding:22px}
.aside-cta h3{color:#fff}.aside-cta a{color:#e7b48f;font-weight:600}

/* ---------- Article ---------- */
.article-head{padding:48px 0 0}
.article-head h1{font-size:clamp(2rem,4.4vw,3.2rem)}
.article-meta{display:flex;flex-wrap:wrap;gap:18px;color:var(--muted);font-size:.85rem;font-family:var(--sans);margin-top:16px;padding-bottom:22px;border-bottom:1px solid var(--line)}
.article-hero{margin:30px 0}
.article-hero .ed-img{height:min(56vh,520px);border-radius:3px}
.article-body{font-size:1.16rem;line-height:1.8}
.article-body h2{margin-top:1.6em}
.quick-answer{background:#fff;border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:0;padding:22px 26px;margin:28px 0}
.quick-answer h2{font-size:.8rem;text-transform:uppercase;letter-spacing:.14em;font-family:var(--sans);font-weight:600;color:var(--accent-ink);margin:0 0 8px}
.quick-answer p{margin:0;font-family:var(--serif);font-size:1.15rem;color:var(--ink)}
.key-facts table,.compare{width:100%;border-collapse:collapse;margin:18px 0;font-family:var(--sans);font-size:.98rem}
.key-facts th,.key-facts td,.compare th,.compare td{border-bottom:1px solid var(--line);padding:12px 8px;text-align:left}
.key-facts th[scope=row]{color:var(--muted);font-weight:500;width:40%}
.compare thead th{font-size:.74rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.toc{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:18px 0;margin:24px 0;font-family:var(--sans)}
.toc h2{font-size:.74rem;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);margin:0 0 8px}
.toc ol{margin:0;padding-left:1.2em;font-size:.95rem;columns:2}
.faq details{border-bottom:1px solid var(--line);padding:16px 0}
.faq summary{font-family:var(--serif);font-size:1.15rem;color:var(--ink);cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"+";color:var(--accent);margin-right:12px}
.faq details[open] summary::before{content:"–"}
.author-box{display:flex;gap:18px;align-items:flex-start;background:var(--paper);border:1px solid var(--line);border-radius:3px;padding:24px;margin:36px 0}
.author-box .avatar{width:64px;height:64px;border-radius:50%;background:var(--stone);flex:none;background-size:cover}
.author-box .reviewed{font-size:.85rem;color:var(--muted);font-family:var(--sans)}
.related .link-list{list-style:none;padding:0;margin:0}
.related .link-list li{border-bottom:1px solid var(--line);padding:12px 0;font-family:var(--serif);font-size:1.1rem}
.draft-flag{background:#fbf3ea;border:1px solid #e7cbb0;border-radius:3px;padding:12px 16px;font-size:.85rem;color:var(--accent-ink);font-family:var(--sans)}
.placeholder{color:var(--muted);font-style:italic}

/* ---------- generic link lists ---------- */
.link-list{list-style:none;padding:0;margin:0}
.link-list li{border-bottom:1px solid var(--line);padding:12px 0}
.link-list a{font-family:var(--serif);font-size:1.1rem}

/* ---------- Authors strip ---------- */
.authors{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:30px}
.author-card{text-align:left}
.author-card .role{font-family:var(--sans);font-size:.8rem;text-transform:uppercase;letter-spacing:.1em;color:var(--accent-ink);margin:.3em 0}
.author-card p{font-family:var(--sans);font-size:.92rem;color:var(--muted)}

/* ---------- Newsletter ---------- */
.news{background:var(--stone);border-radius:3px;padding:48px;text-align:center}
.news h2{margin-bottom:.2em}
.news form{display:flex;gap:10px;max-width:440px;margin:20px auto 0}
.news input{flex:1;border:1px solid var(--line);border-radius:2px;padding:13px 16px;font-size:1rem;font-family:var(--sans)}

/* ---------- Footer ---------- */
.site-footer{background:var(--ink);color:#cfc6b8;margin-top:80px;font-family:var(--sans);font-size:.92rem}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:40px;padding:64px 28px}
.site-footer h3{color:#fff;font-family:var(--sans);font-size:.78rem;text-transform:uppercase;letter-spacing:.14em;font-weight:600}
.site-footer a{color:#cfc6b8}.site-footer a:hover{color:#fff}
.site-footer .brand{color:#fff}
.footer-col ul{list-style:none;padding:0;margin:14px 0 0}
.footer-col li{padding:6px 0}
.social{display:flex;gap:18px;flex-wrap:wrap;margin-top:14px}
.footer-base{border-top:1px solid rgba(255,255,255,.14);padding:20px 28px;font-size:.82rem;color:var(--muted)}

/* ---------- Hero trust bar ---------- */
.hero-trust{background:var(--ink);color:#cfc6b8;font-family:var(--sans)}
.hero-trust .wrap{display:flex;flex-wrap:wrap;gap:28px;justify-content:center;padding:16px 28px;font-size:.8rem;letter-spacing:.04em}
.hero-trust span{display:inline-flex;align-items:center;gap:8px}
.hero-trust b{color:#fff;font-weight:500}
.hero-trust .dot{color:var(--accent)}

/* ---------- Homepage search module ---------- */
.searchhub{background:var(--ink);color:#fff}
.searchhub .wrap{padding:64px 28px;text-align:center}
.searchhub h2{color:#fff}
.searchhub .eyebrow{color:#e7b48f}
.searchbar{display:flex;max-width:620px;margin:22px auto 0;border:1px solid rgba(255,255,255,.3);border-radius:2px;overflow:hidden;background:rgba(255,255,255,.06)}
.searchbar input{flex:1;background:transparent;border:0;color:#fff;padding:16px 20px;font-size:1.05rem;font-family:var(--sans)}
.searchbar input::placeholder{color:rgba(255,255,255,.6)}
.searchbar button{background:var(--accent);color:#fff;border:0;padding:0 26px;font-weight:600;font-family:var(--sans);cursor:pointer}
.search-quick{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:18px}
.search-quick a{color:#e7b48f;font-size:.82rem;text-transform:uppercase;letter-spacing:.1em;border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:8px 16px}
.search-quick a:hover{background:#fff;color:var(--ink)}

/* ---------- Ranked lists (trending/popular) ---------- */
.rank-grid{display:grid;grid-template-columns:1fr 1fr;gap:44px}
.rank{list-style:none;padding:0;margin:0;counter-reset:r}
.rank li{counter-increment:r;display:flex;gap:16px;align-items:baseline;border-bottom:1px solid var(--line);padding:14px 0}
.rank li::before{content:counter(r,decimal-leading-zero);font-family:var(--serif);font-size:1.1rem;color:var(--accent);min-width:30px}
.rank a{font-family:var(--serif);font-size:1.12rem;line-height:1.3}
.rank .meta{display:block;font-family:var(--sans);font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-top:2px}

/* ---------- Latest updates ---------- */
.updates{list-style:none;padding:0;margin:0}
.updates li{display:flex;gap:18px;border-bottom:1px solid var(--line);padding:16px 0}
.updates .date{font-family:var(--sans);font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:var(--accent-ink);min-width:120px;padding-top:3px}
.updates a{font-family:var(--serif);font-size:1.15rem}

/* ---------- Editorial note ---------- */
.ednote{border-top:2px solid var(--ink);border-bottom:1px solid var(--line);padding:40px 0}
.ednote .lede{max-width:780px}
.ednote .sign{font-family:var(--sans);font-size:.82rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-top:16px}

/* ---------- Most searched destinations (compact image grid) ---------- */
.dest-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px}
.dest-tile{position:relative;height:160px;border-radius:3px;overflow:hidden;display:flex;align-items:flex-end;color:#fff}
.dest-tile .ed-img{position:absolute;inset:0;height:100%;transition:transform .5s ease}
.dest-tile:hover .ed-img{transform:scale(1.05)}
.dest-tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.6))}
.dest-tile span{position:relative;z-index:2;padding:14px;font-family:var(--serif);font-size:1.1rem}

/* ---------- Hub planning module ---------- */
.plan-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin:30px 0}
.plan-step{border-top:2px solid var(--accent);padding:14px 0}
.plan-step .n{font-family:var(--sans);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-ink)}
.plan-step h4{font-family:var(--serif);font-weight:400;font-size:1.1rem;margin:.3em 0 .2em}
.plan-step p{font-family:var(--sans);font-size:.85rem;color:var(--muted);margin:0}

/* ---------- Trust / editorial standards ---------- */
.standards{background:var(--paper);border:1px solid var(--line);border-radius:3px;padding:24px;margin:24px 0;font-family:var(--sans)}
.standards h3{font-family:var(--sans);font-size:.78rem;text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}
.standards ul{list-style:none;padding:0;margin:12px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:10px;font-size:.9rem}
.standards li{display:flex;gap:10px}
.standards .tick{color:var(--accent)}
.update-history{font-family:var(--sans);font-size:.82rem;color:var(--muted);border-left:2px solid var(--line);padding-left:14px;margin:18px 0}

/* ---------- Search page ---------- */
.search-page{padding:48px 0}
.search-page .searchbar{margin:24px 0 0;border-color:var(--line);background:var(--paper)}
.search-page .searchbar input{color:var(--ink)}
.search-page .searchbar input::placeholder{color:var(--muted)}
.search-results{margin-top:30px}
.search-results a{display:block;border-bottom:1px solid var(--line);padding:14px 0}
.search-results .t{font-family:var(--serif);font-size:1.15rem;color:var(--ink)}
.search-results .c{font-family:var(--sans);font-size:.76rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.search-cats{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.search-cats a{border:1px solid var(--line);border-radius:999px;padding:9px 18px;font-family:var(--sans);font-size:.85rem;color:var(--ink)}
.search-cats a:hover{background:var(--ink);color:#fff}

/* ---------- Responsive ---------- */
@media (max-width:920px){
  .feature-grid{grid-template-columns:1fr}
  .hub-layout{grid-template-columns:1fr;gap:34px}
  .footer-grid{grid-template-columns:1fr;gap:26px}
  .toc ol{columns:1}
  .rank-grid{grid-template-columns:1fr;gap:0}
  .plan-steps{grid-template-columns:1fr 1fr}
  .standards ul{grid-template-columns:1fr}
}
@media (max-width:760px){
  body{font-size:17px}
  .header-inner{height:62px;gap:14px}
  .primary-nav{position:fixed;inset:62px 0 auto 0;background:var(--bg);border-bottom:1px solid var(--line);display:none}
  .primary-nav.open{display:block}
  .primary-nav ul{flex-direction:column;gap:0;padding:8px 28px}
  .primary-nav li{border-bottom:1px solid var(--line)}
  .primary-nav a{display:block;padding:14px 0}
  .nav-toggle{display:inline-block}
  .nav-search{display:none}
  .hero{min-height:68vh}
  .section{padding:48px 0}
  .news{padding:30px 20px}.news form{flex-direction:column}
}