/* The dictionary (root/dictionary/index and word) on faxo.css's colors, light and dark. Words are
   set in a serif, as a dictionary would; everything else is the site's system font. */
.fx-dict-page { --dc-a: #5e5ce6; --dc-b: #bf5af2; --dc-serif: ui-serif, "New York", Georgia, "Times New Roman", serif;
  background: var(--bg); color: var(--label); padding-bottom: 96px; }
.fx-dict-page h1, .fx-dict-page h2 { color: var(--label); }

.fx-dc-hero { padding-top: 28px; padding-bottom: 30px; }
.fx-dc-eyebrow { color: var(--dc-a); font-weight: 600; font-size: 15px; }
.fx-dc-hero h1 { font-family: var(--dc-serif); font-size: 38px; line-height: 1.08; font-weight: 700; letter-spacing: -.02em; margin: 6px 0 12px; max-width: 16em; }
.fx-dc-lead { font-size: 18px; line-height: 1.5; color: var(--secondary); margin: 0 0 20px; max-width: 34em; }
.fx-dc-cta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 380px; }
.fx-dc-cta .fx-btn { color: var(--label); }
.fx-dict-page .fx-btn.primary, .fx-dict-page .fx-joinbar-btn { color: #fff; background: linear-gradient(135deg, var(--dc-a), var(--dc-b)); }

/* the wall of definitions: one column on phones, a masonry of columns wider up */
.fx-dc-wall { columns: 1; column-gap: 12px; }
.fx-dc-entry { break-inside: avoid; display: grid; gap: 6px; margin: 0 0 12px; padding: 16px 18px; border-radius: 18px;
  background: var(--card); box-shadow: 0 1px 2px rgba(0, 0, 0, .06); text-decoration: none; color: var(--label); transition: transform .15s ease; }
.fx-dc-entry:hover { transform: translateY(-2px); }
.fx-dc-word { font-family: var(--dc-serif); font-size: 24px; font-weight: 700; line-height: 1.15; letter-spacing: -.01em; overflow-wrap: anywhere; }
.fx-dc-meaning { font-size: 15px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.fx-dc-example { font-size: 14px; line-height: 1.45; color: var(--secondary); font-style: italic; border-left: 3px solid color-mix(in srgb, var(--dc-a) 45%, transparent);
  padding-left: 10px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.fx-dc-likes { font-size: 13px; color: var(--secondary); }
.fx-dc-entry.big { color: #fff; background: linear-gradient(135deg, var(--dc-a), var(--dc-b)); padding: 22px 22px 20px; }
.fx-dc-entry.big .fx-dc-kicker { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; opacity: .85; }
.fx-dc-entry.big .fx-dc-word { font-size: 34px; }
.fx-dc-entry.big .fx-dc-meaning { font-size: 17px; -webkit-line-clamp: 6; }
.fx-dc-entry.big .fx-dc-example, .fx-dc-entry.big .fx-dc-likes { color: rgba(255, 255, 255, .85); border-left-color: rgba(255, 255, 255, .5); }
.fx-dc-more { text-align: center; margin: 6px 0 0; }
.fx-dc-more .fx-btn { width: auto; display: inline-flex; padding: 0 24px; color: var(--label); }

.fx-dc-band { background: var(--page); padding: 34px 0 30px; margin-top: 36px; }
.fx-dc-band h2, .fx-dc-final h2, .fx-dc-related h2 { font-size: 28px; font-weight: 700; letter-spacing: -.02em; margin: 0 0 16px; }
.fx-dc-steps { list-style: none; counter-reset: s; margin: 0; padding: 0; display: grid; gap: 12px; }
.fx-dc-steps li { counter-increment: s; background: var(--card); border-radius: 16px; padding: 16px 16px 16px 60px; position: relative; display: grid; gap: 4px; }
.fx-dc-steps li::before { content: counter(s); position: absolute; left: 16px; top: 16px; width: 30px; height: 30px; border-radius: 50%;
  background: linear-gradient(135deg, var(--dc-a), var(--dc-b)); color: #fff; font-weight: 700; display: grid; place-items: center; }
.fx-dc-steps strong { font-size: 17px; }
.fx-dc-steps span { color: var(--secondary); font-size: 15px; line-height: 1.45; }
.fx-dc-final { text-align: center; padding-top: 40px; padding-bottom: 20px; }
.fx-dc-final p { color: var(--secondary); margin: -8px 0 18px; font-size: 17px; }
.fx-dc-final .fx-btn { width: auto; display: inline-flex; padding: 0 28px; }

/* a word's page */
.fx-dc-crumb { padding-top: 18px; font-size: 15px; }
.fx-dc-crumb a { color: var(--dc-a); text-decoration: none; font-weight: 600; }
.fx-dc-crumb a::before { content: "‹ "; }
.fx-dc-def { padding: 8px 0 4px; }
.fx-dc-def-word { font-family: var(--dc-serif); font-size: 44px; line-height: 1.05; font-weight: 700; letter-spacing: -.02em; margin: 6px 0 4px; overflow-wrap: anywhere; }
.fx-dc-def-label { font-family: var(--dc-serif); font-style: italic; color: var(--secondary); font-size: 17px; margin-bottom: 10px; }
.fx-dc-def-meaning { font-size: 21px; line-height: 1.5; margin: 0 0 16px; }
.fx-dc-def-example { margin: 0 0 18px; padding: 12px 16px; border-left: 4px solid var(--dc-a); background: var(--fill); border-radius: 0 14px 14px 0;
  font-family: var(--dc-serif); font-style: italic; font-size: 18px; line-height: 1.5; color: var(--label); }
.fx-dc-def-img { margin: 0 0 18px; }
.fx-dc-def-img img { display: block; max-width: 100%; max-height: 520px; border-radius: 16px; }
.fx-dc-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; }
.fx-dc-tags span { font-size: 14px; padding: 5px 12px; border-radius: 999px; background: var(--fill); color: var(--secondary); }
.fx-dc-by { margin: 4px 0 8px; }
.fx-dc-related { padding-top: 28px; }
.fx-dc-wall.small .fx-dc-word { font-size: 21px; }

@media (min-width: 640px) {
  .fx-dc-wall { columns: 2; }
}
@media (min-width: 760px) {
  .fx-dc-hero { padding-top: 44px; }
  .fx-dc-hero h1 { font-size: 54px; }
  .fx-dc-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fx-dc-def-word { font-size: 60px; }
}
@media (min-width: 1000px) {
  .fx-dc-wall { columns: 3; }
  .fx-dc-wall.small { columns: 2; }
}