/**
 * Telara home page: gate layout (default) and premiere layout (Ranger > Dashboard > premiere mode).
 * Loaded only on the home page (template.php). Markup: PHP partials in templates/telara/home/.
 * Shared pieces (.tl-panel, .tl-btn, .tl-tag, .tl-slot, .tl-orn, .tl-sec…) are in telara-components.css.
 *
 * Performance: everything is static except one entrance of the crest / hero on page load
 * (opacity + transform, once, compositor only) and transform on hover. No animation keeps running,
 * no fixed backgrounds (the page picture stays on body::before), no backdrop-filter.
 */


/* ------------------------------------------------------------------
 * Gate layout: crest, heading, "Enter the world" bar
 * ------------------------------------------------------------------ */
.tl-gate {
    position: relative;
    padding: 26px 0 0;
    text-align: center;
}

.tl-gate::before {
    content: '';
    position: absolute;
    inset: -20px 0 -80px;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(48% 50% at 50% 30%, rgba(230, 170, 70, 0.14), transparent 70%);
}

.tl-gate__crest-link {
    display: inline-block;
}

.tl-gate__crest {
    display: block;
    width: 440px;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.75));
    animation: tl-rise 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.tl-gate__title {
    margin: 10px auto 0;
    max-width: 760px;
    color: var(--tl-title);
    font-size: 1.375rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.9);
}

.tl-gate__lead {
    margin: 8px auto 0;
    max-width: 560px;
    color: #ede6d8;
    font-size: 1.125rem;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9);
}

.tl-enter {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 22px;
    max-width: 980px;
    margin: 44px auto 0;
    padding: 20px 20px 20px 18px;
    text-align: left;
}

.tl-enter__online {
    position: absolute;
    top: -13px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 3px 14px;
    border: 1px solid var(--tl-bronze-deep);
    border-radius: 2px;
    background: var(--tl-void);
    color: var(--tl-muted);
    font-size: 0.8125rem;
    white-space: nowrap;
    text-decoration: none;
}

.tl-enter__online:hover,
.tl-enter__online:focus {
    color: var(--tl-gold-pale);
    text-decoration: none;
}

.tl-enter__title {
    margin: 0;
    color: var(--tl-gold-pale);
    font-size: 1.625rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.tl-enter__lead {
    margin: 4px 0 0;
    color: var(--tl-muted);
    font-size: 0.9375rem;
}

.tl-enter__acts {
    display: flex;
    gap: 12px;
}

.tl-enter__acts .tl-btn {
    min-height: 52px;
}

/* Gate page body */
.tl-home--gate {
    padding-bottom: 8px;
}

.tl-home--gate > .world-migration-banners,
.tl-home--gate > .url-link-test-panel {
    margin-top: 28px;
}

.tl-notices {
    display: grid;
    gap: 10px;
    max-width: 980px;
    margin: 28px auto 0;
}

.tl-notices .ticket-player-notice {
    display: block;
    padding: 12px 16px;
    border: 1px solid var(--tl-gold-deep);
    border-radius: 3px;
    background: #2a1f10;
    color: var(--tl-gold-pale);
    text-decoration: none;
}

.tl-notices .ticket-player-notice-sub {
    display: block;
    color: var(--tl-muted);
    font-size: 0.875rem;
}

/* Tiles */
.tl-tiles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.tl-tile,
a.tl-tile {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    align-items: center;
    gap: 20px;
    padding: 20px;
    overflow: hidden;
    color: var(--tl-parchment);
    text-decoration: none;
    transition: transform 0.18s ease;
}

.tl-tile:hover,
.tl-tile:focus {
    transform: translateY(-2px);
    color: var(--tl-parchment);
    text-decoration: none;
}

.tl-tile__icon {
    display: grid;
    place-items: center;
    width: 96px;
    height: 96px;
    border-radius: 6px;
    background: radial-gradient(circle at 50% 35%, #2a2219, var(--tl-void) 75%);
    border: 1px solid var(--tl-bronze-deep);
    box-shadow: 0 0 0 1px var(--tl-frame-outer), inset 0 0 18px rgba(0, 0, 0, 0.9);
    color: var(--tl-gold-hero);
    transition: border-color 0.18s ease;
}

.tl-tile:hover .tl-tile__icon,
.tl-tile:focus .tl-tile__icon {
    border-color: var(--tl-gold);
}

.tl-tile__icon img {
    width: 80px;
    height: 80px;
    border-radius: 10px;
}

.tl-tile__icon .tl-icon {
    width: 40px;
    height: 40px;
}

.tl-tile__body {
    display: block;
    min-width: 0;
}

.tl-tile__title {
    display: block;
    margin-bottom: 6px;
    color: var(--tl-title);
    font-family: var(--font-heading);
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.tl-tile__text {
    display: block;
    color: var(--tl-muted);
    font-size: 0.9375rem;
    line-height: 1.5;
}

.tl-tile__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

/* Today on the server: three equal panels */
.tl-today {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    align-items: stretch;
}

.tl-today__panel {
    min-width: 0;
}

.tl-home .tl-today__panel > .box-content {
    padding: 8px 20px 20px !important;     /* main-dark.css and the template's mobile rules pad .box-events differently */
    font-size: inherit;
    background: transparent;
    border: 0;
    box-shadow: none;
    margin: 0;
}

.tl-home .box-events .event-table {
    display: block;
}

.tl-home .box-events .event-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 0 !important;
    border-top: 1px solid rgba(58, 45, 32, 0.8);
    border-bottom: 0;
}

.tl-home .box-events .event-row:first-child {
    border-top: 0;
}

.tl-home .box-events .event-label {
    margin: 0;
    padding: 0;
    font-family: var(--font-heading);
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.tl-home .box-events .event-value {
    margin: 0;
    padding: 0;
    flex: none;
}

.tl-home .box-events .events-box-footer {
    margin-top: 10px;
    padding: 0;
    border: 0;
}

.tl-home .box-events .events-calendar-link,
.tl-home .box-events .events-calendar-link:visited,
.tl-panel__more {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--tl-line);
    border-radius: 3px;
    background: transparent;
    color: var(--tl-muted);
    font-family: var(--font-heading);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
}

.tl-home .box-events .events-calendar-link:hover,
.tl-panel__more:hover,
.tl-panel__more:focus {
    color: var(--tl-gold-pale) !important;
    border-color: var(--tl-bronze) !important;
    text-decoration: none;
}

.tl-panel__more .tl-icon {
    width: 16px;
    height: 16px;
    color: var(--tl-gold);
}

.tl-today__panel.box-top-stats {
    padding-bottom: 20px;
}

.tl-today__panel.box-top-stats .top-stats-cols,
.tl-today__panel.box-top-stats .top-stats-list,
.tl-today__panel.box-top-stats .top-stats-empty {
    margin-left: 20px;
    margin-right: 20px;
}

.tl-today__panel.box-top-stats .tl-panel__more {
    width: auto;
    margin: 10px 20px 0;
}

.tl-today__raids .raid-feed {
    height: 100%;
    padding: 18px 20px 20px;
}

.tl-today__raids .raid-feed__head {
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding-bottom: 8px;
    border-bottom: 0 !important;
}

.tl-today__raids .raid-feed__title {
    font-size: 1.0625rem;
    text-align: center;
}

.tl-today__raids .raid-feed__subtitle {
    text-align: center;
}

.tl-today__raids .raid-feed__list {
    max-height: none;
    overflow: visible;
    cursor: default;
}

/* The three latest kills; the full list is in the sidebar on other pages */
.tl-today__raids .raid-feed__item:nth-child(n+4) {
    display: none;
}

/* News: lead article + list + quick fixes */
.tl-news {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.tl-news--no-lead {
    grid-template-columns: minmax(0, 1fr);
}

.tl-news__side {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
}

.tl-nlist {
    list-style: none;
    margin: 0;
    padding: 6px 20px 16px;
}

.tl-nlist li {
    padding: 13px 0;
    border-top: 1px solid rgba(58, 45, 32, 0.8);
}

.tl-nlist li:first-child {
    border-top: 0;
}

.tl-nlist time {
    display: block;
    color: var(--tl-gold);
    font-size: 0.8125rem;
}

.tl-nlist a {
    display: block;
    margin-top: 3px;
    color: var(--tl-parchment);
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    line-height: 1.35;
}

.tl-nlist a:hover,
.tl-nlist a:focus {
    color: var(--tl-gold-pale);
}

.tl-news .tl-panel__title {
    text-align: left;
    padding-bottom: 0;
}

/* Lead card (both layouts) */
.tl-lead {
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.tl-lead__media {
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-bottom: 1px solid var(--tl-bronze-deep);
    background: var(--tl-void);
}

.tl-lead__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 35%;
}

.tl-lead__text {
    padding: 22px 26px 26px;
}

.tl-lead__title {
    margin: 0 0 10px;
    font-size: 1.625rem;
    line-height: 1.25;
}

.tl-lead__title a {
    color: var(--tl-parchment);
}

.tl-lead__title a:hover,
.tl-lead__title a:focus {
    color: var(--tl-gold-pale);
}

.tl-lead__lead {
    margin: 0 0 18px;
    color: #d9d2c6;
    font-size: 1.0625rem;
    line-height: 1.6;
}

/* Quick fixes table inside the home news */
.tl-home .tl-news__tickers .news-tickers {
    margin-bottom: 0;
}

.tl-home .tl-news__tickers + br,
.tl-home .tl-news__tickers br {
    display: none;
}

/* ------------------------------------------------------------------
 * Premiere layout: hero with two phones, status strip, news cards
 * ------------------------------------------------------------------ */
.tl-hero {
    position: relative;
    overflow: hidden;
    margin-top: 14px;
}

.tl-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(60% 70% at 72% 55%, rgba(230, 160, 60, 0.2), transparent 60%),
        linear-gradient(90deg, rgba(10, 9, 7, 0.85) 0%, rgba(10, 9, 7, 0.55) 40%, rgba(10, 9, 7, 0.05) 75%),
        linear-gradient(180deg, rgba(10, 9, 7, 0) 70%, rgba(10, 9, 7, 0.8) 100%);
}

.tl-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    align-items: center;
    gap: 24px;
    min-height: 560px;
    padding: 46px 0 80px;
}

.tl-hero__copy {
    max-width: 590px;
    animation: tl-rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.tl-hero__app {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 22px;
    color: var(--tl-muted);
    font-size: 0.9375rem;
    line-height: 1.4;
}

.tl-hero__app img {
    width: 56px;
    height: 56px;
    border-radius: 13px;
    box-shadow: 0 0 0 1px var(--tl-gold-pale), 0 0 0 2px var(--tl-frame-outer), 0 10px 24px rgba(0, 0, 0, 0.6);
}

.tl-hero__app b {
    display: block;
    color: var(--tl-gold-pale);
    font-family: var(--font-heading);
    font-size: 0.9375rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.tl-hero__title {
    margin: 0;
    font-size: 4rem;
    line-height: 1.02;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: var(--tl-gold-hero);
    background: linear-gradient(180deg, #fff3c4 0%, #f0cf6e 45%, #b8862c 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: none;
    filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.7));
}

.tl-hero__title small {
    display: block;
    font-weight: 700;
    color: inherit;
    margin-top: 6px;
    font-size: 2.125rem;
    letter-spacing: 0.06em;
}

.tl-hero .tl-orn {
    width: 260px;
    margin: 22px 0;
}

.tl-hero__lead {
    max-width: 500px;
    margin: 0;
    color: #e9e2d4;
    font-size: 1.1875rem;
    line-height: 1.6;
}

.tl-hero__cta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin: 28px 0 22px;
}

.tl-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tl-chips .tl-tag {
    padding: 5px 10px;
    color: var(--tl-title);
}

.tl-hero__stage {
    position: relative;
    height: 470px;
    animation: tl-rise 0.9s 0.1s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.tl-hero__stage::before {
    content: '';
    position: absolute;
    inset: 10% 5% 0 15%;
    z-index: -1;
    background: radial-gradient(closest-side, rgba(230, 195, 92, 0.25), transparent);
}

.tl-phone {
    position: absolute;
    padding: 7px;
    border-radius: 28px;
    background: linear-gradient(150deg, #4a3a24, #120f0b 40%, #2a2016);
    box-shadow: 0 0 0 1px var(--tl-gold), 0 0 0 2px var(--tl-frame-outer), 0 40px 60px -20px rgba(0, 0, 0, 0.9);
}

.tl-phone img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 21px;
}

.tl-phone--tall {
    width: 222px;
    right: 18px;
    top: 0;
    transform: rotate(4deg);
}

.tl-phone--wide {
    width: 520px;
    left: 0;
    bottom: 6px;
    transform: rotate(-3deg);
}

.tl-phone--wide::after {
    content: '';
    position: absolute;
    inset: 7px;
    border-radius: 21px;
    background: linear-gradient(115deg, rgba(255, 255, 255, 0.12), transparent 30%);
    pointer-events: none;
}

/* Trailer (js/telara-hero-video.js): moving background, gameplay loop in the wide phone, "watch" link, trailer window */
.tl-hero {
    isolation: isolate;
}

.tl-hero__bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    overflow: hidden;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 78%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 78%, transparent 100%);
}

.tl-hero__ambient {
    position: absolute;
    top: -6%;
    left: -6%;
    width: 112%;
    height: 112%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1.6s ease;
}

.tl-hero__ambient.is-on {
    opacity: 0.5;
}

.tl-phone__screen {
    position: relative;
    overflow: hidden;
    border-radius: 21px;
    background: #0a0907;
}

.tl-phone__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.8s ease;
}

.tl-phone__video.is-on {
    opacity: 1;
}

.tl-phone__play,
a.tl-phone__play {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 13px 6px 9px;
    border: 1px solid var(--tl-gold-pale);
    border-radius: 999px;
    color: var(--tl-gold-pale);
    background: rgba(10, 9, 7, 0.78);
    box-shadow: 0 0 0 1px var(--tl-frame-outer), 0 6px 16px rgba(0, 0, 0, 0.6);
    font-family: var(--font-heading);
    font-size: 0.8125rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.tl-phone__play .tl-icon {
    width: 16px;
    height: 16px;
}

a.tl-phone__play:hover,
a.tl-phone__play:focus {
    color: var(--tl-ink);
    background: var(--tl-gold-button);
    text-decoration: none;
}

.tl-hero__watch,
a.tl-hero__watch {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin: -4px 0 22px;
    color: var(--tl-parchment);
    text-decoration: none;
}

.tl-hero__watch-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 44px;
    height: 44px;
    border: 1px solid var(--tl-gold-pale);
    border-radius: 50%;
    color: var(--tl-gold-pale);
    background: rgba(10, 9, 7, 0.6);
    box-shadow: 0 0 0 1px var(--tl-frame-outer), 0 0 18px rgba(230, 195, 92, 0.25);
    transition: background-color 0.2s ease, color 0.2s ease;
}

.tl-hero__watch-icon .tl-icon {
    width: 20px;
    height: 20px;
    margin-left: 2px;
}

.tl-hero__watch-text b {
    display: block;
    color: var(--tl-gold-pale);
    font-family: var(--font-heading);
    font-size: 0.9375rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.tl-hero__watch-text small {
    display: block;
    color: var(--tl-muted);
    font-size: 0.8125rem;
}

a.tl-hero__watch:hover,
a.tl-hero__watch:focus {
    text-decoration: none;
}

a.tl-hero__watch:hover .tl-hero__watch-icon,
a.tl-hero__watch:focus .tl-hero__watch-icon {
    color: var(--tl-ink);
    background: var(--tl-gold-button);
}

.tl-trailer {
    position: fixed;
    inset: 0;
    width: min(1100px, calc(100vw - 32px), calc((100vh - 110px) * 1.7778));
    height: fit-content;
    margin: auto;
    max-width: none;
    max-height: none;
    padding: 0;
    border: 0;
    background: transparent;
    overflow: visible;
}

.tl-trailer::backdrop {
    background: rgba(6, 5, 4, 0.88);
}

.tl-trailer__box {
    position: relative;
    padding: 6px;
    border-radius: 14px;
    background: linear-gradient(150deg, #4a3a24, #120f0b 40%, #2a2016);
    box-shadow: 0 0 0 1px var(--tl-gold), 0 0 0 2px var(--tl-frame-outer), 0 40px 80px rgba(0, 0, 0, 0.8);
}

.tl-trailer__video {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    border-radius: 9px;
    background: #000;
}

.tl-trailer__close {
    position: absolute;
    top: -18px;
    right: -18px;
    z-index: 2;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--tl-gold-pale);
    border-radius: 50%;
    color: var(--tl-ink);
    background: var(--tl-gold-button);
    box-shadow: 0 0 0 1px var(--tl-frame-outer), 0 6px 16px rgba(0, 0, 0, 0.6);
    font-size: 1.625rem;
    line-height: 1;
    cursor: pointer;
}

.tl-trailer__close:hover,
.tl-trailer__close:focus-visible {
    background: var(--tl-gold-button-hover);
}

@media (prefers-reduced-motion: reduce) {
    .tl-hero__ambient,
    .tl-phone__video {
        transition: none;
    }
}

@media (max-width: 560px) {
    .tl-phone__screen {
        border-radius: 14px;
    }

    .tl-phone__play,
    a.tl-phone__play {
        top: 10px;
        left: 10px;
        gap: 5px;
        padding: 4px 10px 4px 7px;
        font-size: 0.6875rem;
    }

    .tl-phone__play .tl-icon {
        width: 13px;
        height: 13px;
    }

    .tl-trailer__close {
        top: -52px;
        right: 0;
    }
}

/* Status strip */
.tl-strip {
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: -40px;
}

.tl-strip__cell,
a.tl-strip__cell {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 22px;
    color: var(--tl-parchment);
    text-decoration: none;
}

a.tl-strip__cell:hover,
a.tl-strip__cell:focus {
    text-decoration: none;
    color: var(--tl-gold-pale);
}

.tl-strip__cell + .tl-strip__cell {
    border-left: 1px solid var(--tl-line);
}

.tl-strip__k {
    display: block;
    color: var(--tl-faint);
    font-size: 0.8125rem;
}

.tl-strip__v {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-heading);
    font-weight: 700;
    letter-spacing: 0.04em;
    color: inherit;
}

/* The frame under the hero sits a bit closer */
.telara-home--premiere .content {
    margin-top: 10px;
}

/* Premiere main column */
.tl-home--premiere {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.tl-home--premiere .tl-lead__media {
    aspect-ratio: 16 / 8.2;
}

.tl-ncard {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    overflow: hidden;
}

.tl-ncard__thumb {
    display: block;
    position: relative;
    min-height: 160px;
    border-right: 1px solid var(--tl-bronze-deep);
    background: var(--tl-void);
}

.tl-ncard__thumb img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tl-ncard__thumb--empty {
    display: grid;
    place-items: center;
}

.tl-ncard__text {
    padding: 18px 22px;
}

.tl-ncard__title {
    margin: 0 0 8px;
    font-size: 1.125rem;
    line-height: 1.3;
}

.tl-ncard__title a {
    color: var(--tl-parchment);
}

.tl-ncard__title a:hover,
.tl-ncard__title a:focus {
    color: var(--tl-gold-pale);
}

.tl-ncard__excerpt {
    margin: 0 0 10px;
    color: var(--tl-muted);
    font-size: 0.9375rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* The premiere main column has no news frame around it */
.telara-home--premiere body .content .container .main-content .news,
.telara-home--premiere .main-content .news {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
}

/* ------------------------------------------------------------------
 * Narrow screens
 * ------------------------------------------------------------------ */
@media (max-width: 1000px) {
    .tl-tiles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tl-today,
    .tl-news {
        grid-template-columns: minmax(0, 1fr);
    }

    .tl-hero__grid {
        grid-template-columns: minmax(0, 1fr);
        min-height: 0;
        padding: 30px 0 70px;
    }

    .tl-hero__stage {
        width: 100%;
        max-width: 620px;
        height: 330px;
        margin: 0 auto;
    }

    .tl-phone--wide {
        width: 430px;
    }

    .tl-phone--tall {
        width: 170px;
        right: 30px;
    }

    .tl-enter {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .tl-enter__acts {
        grid-column: 1 / -1;
    }

    .tl-enter__acts .tl-btn {
        flex: 1 1 0;
    }
}

@media (max-width: 560px) {
    .tl-gate {
        padding-top: 18px;
    }

    .tl-gate__crest {
        width: 290px;
    }

    .tl-gate__title {
        font-size: 1.0625rem;
        letter-spacing: 0.1em;
    }

    .tl-gate__lead {
        font-size: 1rem;
        padding: 0 8px;
    }

    .tl-enter {
        gap: 14px;
        margin-top: 34px;
        padding: 24px 14px 14px;
    }

    .tl-enter .tl-slot--xl {
        width: 52px;
        height: 52px;
    }

    .tl-enter__title {
        font-size: 1.25rem;
    }

    .tl-enter__acts {
        flex-direction: column;
    }

    .tl-sec {
        margin-top: 48px;
    }

    .tl-sec__title {
        font-size: 1.375rem;
    }

    .tl-sec__more {
        position: static;
        display: inline-block;
        margin-top: 10px;
    }

    .tl-tiles {
        gap: 10px;
    }

    .tl-tile,
    a.tl-tile {
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
        gap: 12px;
        padding: 16px 10px;
        text-align: center;
    }

    .tl-tile__icon {
        width: 76px;
        height: 76px;
    }

    .tl-tile__icon img {
        width: 64px;
        height: 64px;
    }

    .tl-tile__title {
        font-size: 0.875rem;
    }

    .tl-tile__text {
        font-size: 0.8125rem;
    }

    .tl-tile__tags {
        justify-content: center;
    }

    .tl-lead__title {
        font-size: 1.3125rem;
    }

    .tl-lead__text {
        padding: 18px 16px 20px;
    }

    .tl-hero__title {
        font-size: 2.75rem;
    }

    .tl-hero__title small {
        font-size: 1.5rem;
    }

    .tl-hero__lead {
        font-size: 1.0625rem;
    }

    .tl-hero__cta .tl-btn {
        flex: 1 1 100%;
    }

    .tl-hero__stage {
        height: 250px;
        margin-top: 8px;
    }

    .tl-phone {
        padding: 5px;
        border-radius: 18px;
    }

    .tl-phone img {
        border-radius: 14px;
    }

    .tl-phone--wide {
        width: 300px;
    }

    .tl-phone--tall {
        width: 112px;
        right: 0;
    }

    .tl-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tl-strip__cell,
    a.tl-strip__cell {
        padding: 12px 14px;
        gap: 10px;
    }

    .tl-strip__cell:nth-child(3) {
        border-left: 0;
    }

    .tl-strip__cell:nth-child(n+3) {
        border-top: 1px solid var(--tl-line);
    }

    .tl-ncard {
        grid-template-columns: minmax(0, 1fr);
    }

    .tl-ncard__thumb {
        aspect-ratio: 16 / 8;
        min-height: 0;
        border-right: 0;
        border-bottom: 1px solid var(--tl-bronze-deep);
    }
}