/* ============================================================
   LoveYouItaly — "Atelier" — secondary page types
   Destination · Landmark · Destinations index · Article ·
   About · Contact · Help · Auth · Legal · 404
   ============================================================ */

/* ---------- shared: photographic page hero ---------- */
.dest-hero,.landmark-hero{
  position:relative;min-height:52vh;display:flex;align-items:flex-end;
  color:#FDF8F0;overflow:hidden;
}
.dest-hero .bg,.landmark-hero .bg{position:absolute;inset:0;background-size:cover;background-position:center}
.dest-hero .veil,.landmark-hero .veil{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(28,34,26,.5) 0%,rgba(28,34,26,.2) 40%,rgba(28,34,26,.72) 100%);
}
.dest-hero .container,.landmark-hero .container{position:relative;width:100%;padding-top:150px;padding-bottom:44px}
.dest-hero h1,.landmark-hero h1{font-size:clamp(36px,4.6vw,58px);max-width:26ch}
.dest-hero .eyebrow,.landmark-hero .eyebrow{color:#EFC3A2}
.dest-hero .crumbs,.landmark-hero .crumbs{color:rgba(253,248,240,.75);padding:0 0 12px}
.dest-hero .crumbs a:hover,.landmark-hero .crumbs a:hover{color:#EFC3A2}
.dest-hero .facts,.landmark-hero .facts{
  display:flex;gap:18px;margin-top:16px;flex-wrap:wrap;
  font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:rgba(253,248,240,.82);
}

/* ---------- destination intro ---------- */
.dest-intro{display:grid;grid-template-columns:1.25fr .75fr;gap:56px;align-items:start}
.dest-intro .lead{font-family:var(--serif);font-size:27px;line-height:1.5;font-style:italic;max-width:42ch}
.dest-intro .lead p{
  margin-top:18px;font-family:var(--sans);font-size:15px;font-style:normal;
  color:var(--ivory-soft);line-height:1.75;max-width:58ch;
}
.fact-card{background:var(--night-2);border:1px solid var(--line);padding:26px}
.fact-card h3{font-size:20px;margin-bottom:10px}
.fact-card .row{display:flex;justify-content:space-between;gap:14px;padding:12px 0;border-bottom:1px solid var(--line);font-size:15px}
.fact-card .row:last-child{border:none}
.fact-card .k{color:var(--ivory-soft);letter-spacing:.09em;text-transform:uppercase;font-size:11.5px;padding-top:2px;flex:none}
.fact-card .v{text-align:right}

/* ---------- seasons ---------- */
.season-row{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line)}
.season{background:var(--night);padding:24px}
.season .tag{font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
.season h3{font-size:24px;margin:9px 0}
.season p{font-size:15.5px;color:var(--ivory-soft)}

/* ---------- destinations index ---------- */
.stat-strip{display:flex;gap:54px;flex-wrap:wrap;padding:30px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:30px 0 46px}
.stat-strip .stat b{display:block;font-family:var(--serif);font-size:36px;color:var(--gold);font-weight:500}
.stat-strip .stat span{font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ivory-soft)}
.region-index-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 44px}
.dest-card-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line)}
.dest-card{
  background:var(--night);position:relative;overflow:hidden;aspect-ratio:3/3.5;
  display:flex;align-items:flex-end;background-size:cover;background-position:center;color:#FDF8F0;
}
.dest-card .veil{position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(24,32,26,.88));transition:.3s}
.dest-card:hover .veil{background:linear-gradient(180deg,transparent 28%,rgba(24,32,26,.92))}
.dest-card .body{position:relative;padding:20px}
.dest-card h3{font-size:24px}
.dest-card p{font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:rgba(253,248,240,.78);margin-top:4px}
.dest-card .count{font-size:13px;color:#EFC3A2;margin-top:7px;font-style:italic;font-family:var(--serif)}

/* ---------- journal article ---------- */
.article-head{max-width:1060px;margin:0 auto;padding:56px 0 22px;text-align:center}
.article-head h1{font-size:clamp(30px,3.6vw,46px);margin:14px 0 16px;max-width:30ch;margin-left:auto;margin-right:auto}
.article-head .lede{font-size:17px;color:var(--ivory-soft);max-width:56ch;margin:0 auto;font-weight:300}
.article-meta{font-size:11.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--ivory-soft);display:flex;gap:16px;justify-content:center}
.article-hero-img{aspect-ratio:21/9;background-size:cover;background-position:center;margin:34px 0 48px;background-color:#E4DCCB;border:1px solid var(--line)}
.article-body{max-width:920px;margin:0 auto;font-size:17px}
.article-body h2{font-size:27px;margin:42px 0 14px}
.article-body p{margin-bottom:17px;line-height:1.8;color:var(--ivory-soft)}
.article-body .pullquote{
  font-family:var(--serif);font-style:italic;font-size:25px;color:var(--gold);
  border-left:2px solid var(--gold);padding:6px 0 6px 26px;margin:34px 0;line-height:1.4;
}
.tip-box{background:var(--night-2);border:1px solid var(--line);padding:22px 26px;margin:30px 0;font-size:14.5px;color:var(--ivory-soft)}
.tip-box b{color:var(--gold)}
.inline-cta{
  display:flex;justify-content:space-between;align-items:center;gap:24px;
  border:1px solid var(--line);background:var(--night-2);padding:28px 32px;margin:38px 0;flex-wrap:wrap;
}
.inline-cta h3{font-size:23px}
.inline-cta p{color:var(--ivory-soft);font-size:14px;margin:6px 0 0;line-height:1.5}
.author-box{display:flex;gap:18px;align-items:center;border-top:1px solid var(--line);margin-top:48px;padding-top:28px}
.author-box img{width:58px;height:58px;border-radius:50%;object-fit:cover}
.author-box b{display:block;font-size:14.5px;letter-spacing:.04em}
.author-box span{font-size:13px;color:var(--ivory-soft)}

/* ---------- legal pages ---------- */
.legal-wrap{max-width:1100px;margin:0 auto;padding:56px 0 34px}
.legal-wrap h1{font-size:clamp(30px,3.4vw,44px)}
.legal-updated{font-size:11.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);margin:14px 0 40px}
.legal-wrap h2{font-size:23px;margin:38px 0 12px}
.legal-wrap p,.legal-wrap li{color:var(--ivory-soft);margin-bottom:12px;font-size:14.5px;line-height:1.8}
.legal-wrap ul{list-style:disc;padding-left:22px}
.legal-wrap a{color:var(--gold)}

/* ---------- auth ---------- */
.auth-wrap{display:grid;grid-template-columns:1fr 1fr;min-height:calc(100vh - 120px)}
.auth-side{
  background-size:cover;background-position:center;position:relative;
  display:flex;align-items:flex-end;color:#FDF8F0;background-color:#2A3A31;
}
.auth-side .veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(28,34,26,.25),rgba(28,34,26,.82))}
.auth-side .copy{position:relative;padding:52px}
.auth-side .eyebrow{color:#EFC3A2}
.auth-side h2{font-size:31px;max-width:22ch}
.auth-side p{margin-top:14px;color:rgba(253,248,240,.8);max-width:38ch}
.auth-form{display:flex;align-items:center;justify-content:center;padding:60px 30px}
.auth-card{width:100%;max-width:420px}
.auth-card h1{font-size:34px;margin-bottom:8px}
.auth-card .sub{color:var(--ivory-soft);margin-bottom:28px;font-size:14.5px}
.auth-tabs{display:flex;border:1px solid var(--line);padding:4px;margin-bottom:26px;background:var(--night-2)}
.auth-tabs button{
  flex:1;padding:11px;border:none;background:transparent;font-family:var(--sans);
  font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;color:var(--ivory-soft);
}
.auth-tabs button.active{background:var(--gold);color:#FDF8F0}
.auth-card .fld{border:1px solid var(--line);padding:11px 16px;margin-bottom:12px;background:var(--panel)}
.auth-card .fld label{display:block;font-size:11.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold)}
.auth-card .fld input{border:none;outline:none;width:100%;font-size:14.5px;background-color:transparent;color:var(--ivory)}
.auth-card .btn{width:100%}
.auth-div{display:flex;align-items:center;gap:14px;color:var(--ivory-soft);font-size:11.5px;letter-spacing:.26em;text-transform:uppercase;margin:24px 0}
.auth-div::before,.auth-div::after{content:"";flex:1;height:1px;background:var(--line)}
.social-btn{
  width:100%;display:flex;align-items:center;justify-content:center;gap:10px;background:var(--panel);
  border:1px solid var(--line);padding:13px;font-family:var(--sans);font-size:14px;
  letter-spacing:.04em;cursor:pointer;margin-bottom:9px;color:var(--ivory);transition:.2s;
}
.social-btn:hover{border-color:var(--gold);color:var(--gold)}
.auth-foot{text-align:center;font-size:13px;color:var(--ivory-soft);margin-top:22px}
.auth-foot a{color:var(--gold)}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:52px;align-items:start}
.contact-form{background:var(--panel);border:1px solid var(--line);padding:38px;box-shadow:var(--shadow)}
.contact-form .fld{border:1px solid var(--line);padding:11px 16px;margin-bottom:12px;background:var(--night)}
.contact-form label{display:block;font-size:11.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold)}
.contact-form input,.contact-form select,.contact-form textarea{
  border:none;outline:none;width:100%;font-size:14.5px;background-color:transparent;resize:vertical;color:var(--ivory);
}
.contact-cards .cc{border:1px solid var(--line);padding:22px 24px;margin-bottom:-1px;background:var(--night-2)}
.contact-cards .cc b{display:block;margin-bottom:5px;font-size:14.5px;letter-spacing:.04em}
.contact-cards .cc span{font-size:14px;color:var(--ivory-soft)}
.contact-cards .cc a{color:var(--gold)}

/* ---------- help centre ---------- */
.help-cats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);margin:42px 0 8px}
.help-cat{background:var(--night);padding:28px;transition:.25s;display:block}
.help-cat:hover{background:var(--panel)}
.help-cat .ico{font-family:var(--serif);font-style:italic;font-size:22px;color:var(--gold);margin-bottom:13px}
.help-cat h3{font-size:24px;margin-bottom:7px}
.help-cat span{font-size:14.5px;color:var(--ivory-soft)}

/* ---------- about ---------- */
.about-hero{padding:64px 0 40px}
.about-hero h1{font-size:clamp(32px,3.8vw,52px);max-width:30ch}
.about-split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.about-split .ph{aspect-ratio:4/3.2;background-size:cover;background-position:center;background-color:#E4DCCB;border:1px solid var(--line)}
.timeline-band{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line)}
.tl-card{background:var(--night);padding:30px}
.tl-card .k{font-size:11.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold)}
.tl-card h3{font-size:24px;margin:11px 0 9px}
.tl-card p{font-size:15.5px;color:var(--ivory-soft)}
.big-quote{font-family:var(--serif);font-style:italic;font-size:clamp(24px,2.7vw,36px);max-width:34ch;line-height:1.4}
.big-quote b{color:var(--gold);font-style:normal;font-weight:500}

/* ---------- 404 ---------- */
.error-page{min-height:56vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:70px 20px}
.error-page .code{font-family:var(--serif);font-style:italic;font-size:clamp(70px,11vw,130px);color:var(--gold-soft);line-height:1;margin-bottom:4px}
.error-page h1{font-size:clamp(26px,3.2vw,38px);margin-bottom:12px;max-width:28ch;margin-left:auto;margin-right:auto}
.error-page p{color:var(--ivory-soft);max-width:50ch;margin:0 auto 30px}
.error-page .journal-search{margin:0 auto 34px}
.error-quicklinks{display:flex;gap:9px;flex-wrap:wrap;justify-content:center}

/* ---------- responsive ---------- */
@media(max-width:1080px){
  .dest-intro,.contact-grid,.auth-wrap,.about-split{grid-template-columns:1fr}
  .season-row,.help-cats,.dest-card-grid{grid-template-columns:1fr 1fr}
  .region-index-grid{grid-template-columns:1fr;gap:0}
  .timeline-band{grid-template-columns:1fr}
  .auth-side{display:none}
  .auth-wrap{min-height:0}
}
@media(max-width:640px){
  .season-row,.help-cats,.dest-card-grid{grid-template-columns:1fr}
  .inline-cta{flex-direction:column;align-items:flex-start;padding:24px}
  .dest-hero .container,.landmark-hero .container{padding-top:126px;padding-bottom:34px}
  .dest-hero h1,.landmark-hero h1{font-size:32px}
  .dest-hero .facts,.landmark-hero .facts{gap:10px;font-size:11.5px}
  .dest-intro .lead{font-size:20px}
  .contact-form{padding:24px}
  .auth-form{padding:40px 18px}
  .article-head{padding:40px 0 18px}
  .article-body{font-size:15.5px}
  .article-body h2{font-size:23px}
  .article-body .pullquote{font-size:21px;padding-left:20px}
  .stat-strip{gap:26px;padding:24px 0;margin:24px 0 34px}
  .stat-strip .stat b{font-size:25px}
  .about-hero h1{font-size:29px}
  .legal-wrap{padding:40px 0 26px}
}