/* about.html ("Our Story"). Hero, .section and .feature come from city.css. */

.story-grid{display:grid;grid-template-columns:1fr 1.25fr;gap:70px;align-items:start}
.story-copy p{font-family:"Cormorant Garamond",serif;font-size:21px;line-height:1.4;margin:0 0 1em}
.story-copy p.lead{font-size:29px;line-height:1.25;color:var(--accent);margin-bottom:1em}

.feature .pillars{list-style:none;margin:22px 0 0;padding:0}
.feature .pillars li{font-family:"Cormorant Garamond",serif;font-size:29px;font-style:italic;line-height:1.15;padding:14px 0;border-top:1px solid rgba(248,240,226,.35)}
.feature .pillars li:last-child{border-bottom:1px solid rgba(248,240,226,.35)}

.cities-row{padding:70px 0}
.cities-row .label{margin-bottom:22px}
.city-links{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.city-link{border:1px solid var(--line);padding:30px 28px;display:flex;flex-direction:column;gap:12px;position:relative;overflow:hidden;min-height:170px;justify-content:flex-end}
.city-link:after{content:"";position:absolute;inset:auto -20px -60px -20px;height:110px;background:var(--accent-soft);transform:rotate(-4deg)}
.city-link>*{position:relative;z-index:1}
.city-link.rome{--accent:var(--green);--accent-soft:rgba(23,53,30,.10)}
.city-name{font-family:"Cormorant Garamond",serif;font-size:56px;line-height:.85;font-weight:500;color:var(--accent)}
.city-sub{font-family:"DM Mono",monospace;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:#62584e}
.city-link:hover{border-color:var(--accent)}

.contact-teaser{background:var(--accent);color:var(--cream);padding:80px 0}
.contact-teaser-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.contact-teaser h2{font-family:"Cormorant Garamond",serif;font-size:52px;font-weight:500;line-height:.9;margin:0}
.contact-teaser h2 em{font-style:italic}
.contact-teaser p{font-family:"Cormorant Garamond",serif;font-size:21px;line-height:1.35;margin:0 0 24px}
.contact-teaser .actions{display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.contact-teaser .cta{background:var(--cream);color:var(--accent)}
.contact-teaser .under{font-family:"DM Mono",monospace;font-size:10px;border-bottom:1px solid var(--cream);padding-bottom:5px}

@media(max-width:850px){
  .story-grid{grid-template-columns:1fr;gap:34px}
  .story-copy p.lead{font-size:25px}
  .city-links{grid-template-columns:1fr}
  .feature .pillars li{font-size:25px}
  .contact-teaser-grid{grid-template-columns:1fr;gap:26px}
}