/* Home page, Layout A (HO-151): tile sentences and the six-story news grid. */

/* Tiles: label plus one sentence that says what the tile does */
.tile::after{background:linear-gradient(180deg,rgba(0,0,0,0) 25%,rgba(0,0,0,.94) 100%)}
.tile .tl{position:absolute;left:22px;right:22px;bottom:20px;z-index:1}
.tile .tl span{position:static;display:block}
.tile .tl em{display:block;font-style:normal;font-size:15px;line-height:1.4;color:#f1ead9;text-shadow:0 1px 3px #000;max-height:0;opacity:0;overflow:hidden;transition:max-height .3s,opacity .3s,margin .3s}
.tile:hover .tl em,.tile:focus-visible .tl em{max-height:90px;opacity:1;margin-top:10px}
@media(hover:none){.tile .tl em{max-height:none;opacity:1;margin-top:8px}}
@media(max-width:600px){.tile{aspect-ratio:4/5}.tile .tl{left:12px;right:12px;bottom:12px}.tile .tl em{max-height:none;opacity:1;margin-top:6px;font-size:12px;line-height:1.3}.tile::after{background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.35) 30%,rgba(0,0,0,.9) 56%,rgba(0,0,0,.96) 100%)}}

/* News, right after the tiles */
#news{background:var(--cream)}
#news h2{color:var(--ink)}
#news .k{color:#5c4318}
#news p a.wide{color:#5c4318!important}
#news-live+p{display:none}   /* HO-171: when the feed is empty the card is the one link; the grid brings this link back */
@media(max-width:600px){#news p a.wide{font-size:12px}}
#news-live{grid-template-columns:1fr}#news-live .side:empty{display:none}#news-live .lead{min-height:220px}
.lnews{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:28px}
.lnews a{display:flex;flex-direction:column;background:#0b0b0b;border-top:2px solid var(--gold);padding:22px 22px 20px;min-height:170px;text-decoration:none}
.lnews a:hover{background:#000}.lnews a:hover h3{color:var(--gold2)}
.lnews .lt{color:var(--gold2);font-size:11px;letter-spacing:.16em;text-transform:uppercase}
.lnews h3{color:#fff;font-size:22px;line-height:1.2;margin:10px 0 14px;font-weight:400}
.lnews .d{margin-top:auto;color:#cfc6b2;font-size:13px}
@media(max-width:900px){.lnews{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.lnews{grid-template-columns:1fr;gap:10px}.lnews a{min-height:0;padding:18px}.lnews a:nth-child(n+4){display:none}.lnews h3{font-size:19px}}