/* Zack's Slang Dictionary. Phone first. */
.sl-page { padding-bottom: 30px; }
.zk .sl-page p { margin-top: 0; }
.sl-wrap { max-width: 760px; margin: 0 auto; padding: 0 var(--gutter, 16px); }
.sl-kicker, .sl-label { font: 400 .78rem/1.3 var(--f-type); letter-spacing: .14em; color: var(--gray); margin: 0 0 10px !important; }
.sl-label--in { margin-top: 18px !important; }
h2.sl-label { font-weight: 400; }
.sl-red { color: var(--red); }

.sl-hero { background: var(--ink); color: var(--paper); margin: 0 0 22px; }
.sl-hero__in { position: relative; max-width: 760px; margin: 0 auto; padding: 30px var(--gutter, 16px) 34px; }
.sl-hero .sl-kicker { color: var(--red-hi); }
.sl-hero__title { font: 900 clamp(2.4rem, 9vw, 3.8rem)/1.02 var(--f-head); color: var(--paper); margin: 4px 0 14px; }
.sl-hero__title em { color: var(--yellow); font-style: italic; display: block; }
.zk .sl-hero__sub { font: italic 400 1.08rem/1.55 var(--f-body); color: #d8d0c0; margin: 0 !important; max-width: 560px; }
.sl-stamp { position: absolute; border: 3px solid var(--red-hi); color: var(--red-hi); font: 400 .74rem/1.15 var(--f-type); letter-spacing: .12em; padding: 6px 10px; text-align: center; transform: rotate(8deg); }
.sl-stamp--hero { right: var(--gutter, 16px); top: 26px; }
.sl-stamp--entry { right: 18px; top: 58px; border-color: var(--red); color: var(--red); background: var(--paper); }

.sl-search { position: relative; display: flex; border: 3px solid var(--ink); background: #fbf8f0; margin: 0 0 16px; }
.sl-search input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 14px 14px; font: italic 400 1.05rem/1.2 var(--f-body); color: var(--ink); }
.sl-search input:focus { outline: 2px solid var(--red); outline-offset: -4px; }
.sl-search button { border: 0; background: var(--red); color: var(--paper); font: 400 .9rem/1 var(--f-type); letter-spacing: .12em; padding: 0 18px; cursor: pointer; }
.sl-search__out { position: absolute; left: -3px; right: -3px; top: 100%; z-index: 20; background: #fbf8f0; border: 3px solid var(--ink); border-top: 0; box-shadow: 6px 6px 0 var(--ink); max-height: 340px; overflow: auto; }
.sl-search__out a { display: block; padding: 10px 14px; border-top: 1px solid rgba(20,19,17,.15); text-decoration: none !important; color: var(--ink) !important; }
.sl-search__out a:hover, .sl-search__out a:focus { background: var(--ink); color: var(--paper) !important; }
.sl-search__out b { font: 700 1.05rem/1.2 var(--f-head); }
.sl-search__out span { display: block; font: italic .9rem/1.3 var(--f-body); color: var(--red); }
.sl-search__out a:hover span { color: var(--red-hi); }
.sl-search__none { padding: 12px 14px; font: 400 .95rem/1.4 var(--f-body); }

.sl-az { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 26px; }
.sl-az__l { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--ink); background: #fbf8f0; font: 400 1rem/1 var(--f-type); color: var(--ink) !important; text-decoration: none !important; }
.sl-az__l:hover, .sl-az__l.is-on { background: var(--ink); color: var(--paper) !important; }
.sl-az__l.is-empty { border-color: #b9b1a1; color: #b9b1a1 !important; background: transparent; }

.sl-sec { margin: 0 0 28px; }
.sl-wotd { background: #efd36a; border: 3px solid var(--ink); box-shadow: 8px 8px 0 var(--ink); padding: 16px 18px 18px; }
.sl-wotd__top { display: flex; justify-content: space-between; gap: 10px; font: 400 .72rem/1.3 var(--f-type); letter-spacing: .1em; margin: 0 0 6px !important; }
.sl-wotd__w { font: italic 900 clamp(2.2rem, 9vw, 3rem)/1 var(--f-head); margin: 4px 0 10px; }
.sl-wotd__w a { color: var(--ink) !important; text-decoration: none !important; }
.zk .sl-wotd__l { font: 400 1.04rem/1.45 var(--f-body); margin: 0 0 6px !important; }
.sl-wotd__act { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

.sl-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 8px 14px; border: 2px solid var(--ink); background: #fbf8f0; color: var(--ink) !important; font: 400 .8rem/1 var(--f-type); letter-spacing: .1em; text-decoration: none !important; cursor: pointer; }
.sl-btn--ink { background: var(--ink); color: var(--paper) !important; }
.sl-btn:hover { background: var(--red); border-color: var(--red); color: var(--paper) !important; }

.sl-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sl-card { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border: 2.5px solid var(--ink); background: #fbf8f0; text-decoration: none !important; color: var(--ink) !important; transition: transform .12s, box-shadow .12s; }
.sl-card:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--red); }
.sl-card__w { font: 900 1.35rem/1.1 var(--f-head); }
.sl-card__s { font: italic 400 .95rem/1.3 var(--f-body); color: var(--red); }
.sl-card__p { margin-top: auto; padding-top: 6px; font: 400 .66rem/1 var(--f-type); letter-spacing: .1em; color: var(--gray); }

.sl-group { display: grid; grid-template-columns: 44px 1fr; gap: 10px; padding: 12px 0; border-top: 2px solid var(--ink); scroll-margin-top: 90px; }
.sl-group__l { font: 900 1.9rem/1 var(--f-head); margin: 0 !important; }
.sl-group__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sl-group__list a { text-decoration: none !important; color: var(--ink) !important; display: block; }
.sl-group__list b { font: 700 1.08rem/1.2 var(--f-head); }
.sl-group__list span { display: block; font: italic .92rem/1.3 var(--f-body); color: var(--red); }
.sl-group__list a:hover b { text-decoration: underline; }
.sl-fine { text-align: center; font: 400 .7rem/1.5 var(--f-type); letter-spacing: .1em; color: var(--gray); margin: 26px 0 0 !important; }

/* word page */
.sl-crumbs { font: 400 .78rem/1.4 var(--f-type); letter-spacing: .12em; color: var(--gray); margin: 14px 0 14px; }
.sl-crumbs a { color: var(--gray) !important; text-decoration: none !important; }
.sl-crumbs span { color: var(--red); }
.sl-entry { position: relative; border: 3px solid var(--ink); background: #fbf8f0; box-shadow: 9px 9px 0 var(--ink); padding: 16px 18px 18px; margin: 0 0 30px; }
.sl-entry__top { display: flex; justify-content: space-between; gap: 10px; font: 400 .72rem/1.3 var(--f-type); letter-spacing: .1em; border-bottom: 3px solid var(--ink); padding-bottom: 8px; margin: 0 0 6px !important; }
.sl-entry__w { font: italic 900 clamp(2.8rem, 13vw, 4.6rem)/1 var(--f-head); margin: 18px 0 6px; padding-right: 90px; word-break: break-word; }
.zk .sl-entry__pron { font: 400 1rem/1.3 var(--f-type); color: var(--ink-2); margin: 0 0 8px !important; }
.sl-chip { display: inline-block; background: var(--ink); color: var(--paper); font: 400 .72rem/1 var(--f-type); letter-spacing: .1em; padding: 5px 8px; margin: 0 0 6px !important; }
.zk .sl-entry__means { font: 400 1.08rem/1.6 var(--f-body); margin: 0 0 16px !important; }
.sl-zack { border-left: 5px solid var(--red); background: #f2e6e1; padding: 14px 16px; }
.zk .sl-zack__h { font: 700 1.05rem/1.2 var(--f-head); color: var(--red); letter-spacing: .04em; margin: 0 0 8px !important; }
.zk .sl-zack__t { font: italic 400 1.08rem/1.55 var(--f-body); margin: 0 !important; }
.sl-ex { list-style: none; margin: 0; padding: 0; }
.sl-ex li { padding: 12px 0; border-bottom: 1px solid rgba(20,19,17,.25); }
.zk .sl-ex__s { font: 400 1.08rem/1.4 var(--f-body); margin: 0 0 4px !important; }
.zk .sl-ex__c { font: italic 400 .95rem/1.4 var(--f-body); color: var(--gray); margin: 0 !important; }
.sl-table { width: 100%; border-collapse: collapse; border: 2.5px solid var(--ink); background: #fbf8f0; }
.sl-table th, .sl-table td { border: 1.5px solid var(--ink); padding: 10px 12px; vertical-align: top; text-align: left; }
.sl-table th { width: 44%; font: 400 .8rem/1.3 var(--f-type); letter-spacing: .06em; background: #e9e1cf; }
.sl-table td { font: 400 1rem/1.4 var(--f-body); }
.sl-meter { display: flex; align-items: center; gap: 12px; }
.sl-meter__bar { flex: 1; height: 18px; border: 2.5px solid var(--ink); background: #fbf8f0; }
.sl-meter__bar i { display: block; height: 100%; background: var(--red); }
.sl-meter b { font: 900 1.4rem/1 var(--f-head); }
.sl-tool { display: flex; flex-direction: column; gap: 6px; background: var(--red); color: var(--paper) !important; padding: 18px 20px 20px; text-decoration: none !important; box-shadow: 6px 6px 0 var(--ink); }
.sl-tool__k { font: 400 .74rem/1.2 var(--f-type); letter-spacing: .12em; color: #f2cdc9; }
.sl-tool__t { font: italic 900 1.8rem/1.05 var(--f-head); }
.sl-tool__d { font: 400 1rem/1.4 var(--f-body); }
.sl-tool__b { align-self: flex-start; margin-top: 8px; background: var(--paper); color: var(--red); font: 400 .8rem/1 var(--f-type); letter-spacing: .1em; padding: 11px 14px; }
.sl-tool:hover .sl-tool__b { background: var(--ink); color: var(--paper); }
.sl-rel { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.sl-pill { padding: 8px 12px; border: 2.5px solid var(--ink); background: #fbf8f0; font: 700 1rem/1.1 var(--f-head); color: var(--ink) !important; text-decoration: none !important; }
.sl-pill:hover { background: var(--ink); color: var(--paper) !important; }
.sl-share { display: flex; flex-wrap: wrap; gap: 8px; }
.sl-more .sl-az { margin-bottom: 12px; }
.sl-back { font: 400 .85rem/1 var(--f-type); letter-spacing: .1em; color: var(--red) !important; }
@media (min-width: 700px) {
	.sl-cards { grid-template-columns: repeat(4, 1fr); }
	.sl-entry { padding: 22px 26px 24px; }
}
.zk .sl-page h2.sl-label { font: 400 .78rem/1.3 var(--f-type); letter-spacing: .14em; color: var(--gray); text-transform: uppercase; margin: 0 0 10px; }
.zk .sl-page h2.sl-label--in { margin-top: 18px; }
.sl-hero .sl-kicker { padding-right: 120px; }