/* The Traditions pages: the front door, a tradition's hub with its runes and
   article cards, and what an article adds to the parchment of text-page.css
   (its breadcrumb, glyph or painting, facts, poems, questions and app box). */

.traditions {
  max-width: 1000px;
  margin: 0 auto;
  padding: 24px 16px 8px;
}

.door-intro,
.intro {
  max-width: 720px;
  margin: 0 auto 30px;
  color: var(--ink-soft);
  font: 400 19px/1.5 var(--heading);
  letter-spacing: 0.3px;
}

.door-intro { text-align: center; }
.intro p { margin: 0 0 12px; }
.intro strong { color: var(--ink); font-weight: 500; }

.section-title {
  margin: 40px 0 14px;
  font: 400 24px/1.25 var(--heading);
  text-transform: uppercase;
}

/* Cards: a banner for an article, or for a tradition on the front door.
   The words on the left; the picture on the right side, framed from near its
   top so a face shows, fading into black under the words. */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
  gap: 12px;
}

.card,
.tradition {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  border: 1px solid rgba(217, 180, 91, 0.45);
  border-radius: 12px;
  background: #000;
  color: #fff;
  text-decoration: none;
  transition: transform 0.15s, filter 0.15s;
}

.card { height: 130px; }
.card.hidden { display: none; }
.card.plain { height: auto; min-height: 96px; }
.card.plain > span:not(.card-glyph) { max-width: 100%; }
.tradition { min-height: 150px; border-color: rgba(217, 180, 91, 0.65); }

.card:hover,
.tradition:hover,
.rune-tile:hover { transform: translateY(-2px); filter: brightness(1.1); }

.card > img,
.card > .card-glyph,
.tradition > img {
  position: absolute;
  top: 0;
  right: 0;
  width: 46%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 18%;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 55%);
  mask-image: linear-gradient(to right, transparent, #000 55%);
}

.card-glyph { display: flex; align-items: center; justify-content: center; }
.card-glyph img { width: 84px; height: 84px; }

.card > span:not(.card-glyph),
.tradition > span { position: relative; z-index: 1; max-width: 60%; }

.card-title {
  display: block;
  padding: 0 16px 2px;
  color: var(--gold);
  font: 400 18px/1.25 var(--heading);
  text-transform: uppercase;
}

/* The tradition a Discover card's article is from, over its top-left corner. */
.card > span.pill {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  max-width: none;
  padding: 3px 9px;
  border: 1px solid rgba(217, 180, 91, 0.6);
  border-radius: 99px;
  background: rgba(0, 0, 0, 0.7);
  color: var(--gold);
  font: 400 11px/1.2 var(--heading);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
/* On Discover the tag sits in the card's column above the title, never over
   it, and a card grows to fit a long title. */
#some-articles .card { height: auto; min-height: 130px; justify-content: flex-start; padding: 12px 0 14px; }
#some-articles .card > span.pill {
  position: relative;
  top: auto;
  left: auto;
  align-self: flex-start;
  max-width: calc(100% - 32px);
  margin: 0 0 8px 16px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.pill em { font-style: normal; color: #9a9a9a; }

/* Discover's heading, with the button that swaps in ten other articles. */
.discover-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 28px 0 14px; }
.discover-head .section-title { margin: 0; }
.more {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border: 1px solid rgba(217, 180, 91, 0.6);
  border-radius: 99px;
  background: rgba(0, 0, 0, 0.7);
  color: var(--gold);
  font: 400 14px/1 var(--heading);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
.more:hover { background: rgba(217, 180, 91, 0.15); }
#some-articles { transition: opacity 0.2s; }
#some-articles.fading { opacity: 0; }

.card-line {
  display: block;
  padding: 0 16px;
  color: var(--ink-soft);
  font: 400 15px/1.4 var(--heading);
}

.tradition-cards { display: grid; gap: 12px; }
.tradition .card-title { font-size: 24px; }
.tradition.soon { min-height: 0; padding: 14px 0; opacity: 0.5; border-color: rgba(241, 243, 245, 0.2); }

@media (max-width: 520px) {
  .cards { grid-template-columns: 1fr; }
}

/* A section of articles on a hub, folding open and shut; one with no
   articles yet is a quiet bar that says so. */
.group {
  margin: 0 0 10px;
  border: 1px solid rgba(217, 180, 91, 0.4);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.72);
}

.group summary,
.group-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  color: var(--gold);
  font: 400 20px var(--heading);
  text-transform: uppercase;
}

.group summary { cursor: pointer; list-style: none; }
.group summary::-webkit-details-marker { display: none; }

.group summary::after {
  content: "";
  width: 10px;
  height: 10px;
  margin-left: auto;
  border-right: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  transform: rotate(45deg);
  transition: transform 0.2s;
}

.group[open] summary::after { transform: rotate(-135deg); }
.group-count { color: var(--ink-soft); font-size: 15px; }
.group .cards { padding: 0 12px 12px; }
.group.soon { opacity: 0.45; }

/* The sections slide open and shut where the browser can animate them
   (Chrome, Edge); elsewhere they open at once. */
:root { interpolate-size: allow-keywords; }

.group::details-content {
  height: 0;
  overflow: hidden;
  opacity: 0;
  transition: height 0.3s ease, opacity 0.3s ease, content-visibility 0.3s allow-discrete;
}

.group[open]::details-content { height: auto; opacity: 1; }

/* The 24 runes, in their families. */
.aett {
  margin: 22px 0 10px;
  color: var(--ink-soft);
  font: 400 17px var(--heading);
  letter-spacing: 1px;
  text-transform: uppercase;
}

.rune-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 10px;
}

.rune-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 4px 10px;
  border: 1px solid rgba(217, 180, 91, 0.5);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.72);
  color: #fff;
  font: 400 15px var(--heading);
  text-decoration: none;
  text-transform: uppercase;
  transition: transform 0.15s, filter 0.15s;
}

.rune-tile img { width: 44px; height: 44px; }
.rune-tile.soon { border-color: rgba(217, 180, 91, 0.15); opacity: 0.55; }

@media (max-width: 700px) {
  .rune-grid { grid-template-columns: repeat(4, 1fr); }
}

/* What an article adds to the parchment. */
.text .crumbs { margin: 0 0 14px; color: #6b5a44; font-size: 14px; }
.text .crumbs a { color: #6b5a44; }

.text .lede { font-size: 20px; line-height: 1.55; }
.text .keywords { color: #5b3a12; font-size: 16px; }

.glyph-figure {
  float: right;
  width: 150px;
  margin: 0 0 12px 22px;
  padding: 18px;
  border: 1px solid rgba(91, 58, 18, 0.25);
  border-radius: 12px;
  background: rgba(91, 58, 18, 0.08);
  text-align: center;
}

.glyph-figure img { width: 100%; height: auto; }

.glyph-figure figcaption {
  margin-top: 6px;
  color: #5b3a12;
  font: 400 15px var(--heading);
  text-transform: uppercase;
}

.painting { margin: 0 0 18px; }
.painting img { width: 100%; height: auto; border-radius: 6px; }
/* A square painting leaves its bottom third dark and plain for the app's
   fade; on the page that only reads as empty, so it is cut away. */
.painting.crop img { aspect-ratio: 3 / 2; object-fit: cover; object-position: 50% 0; }
.painting .credit { margin-top: 6px; color: #6b5a44; font-size: 13px; }
.painting .credit a { color: #6b5a44; }

.text blockquote {
  margin: 0 0 14px;
  padding: 8px 0 2px 18px;
  border-left: 3px solid rgba(91, 58, 18, 0.35);
  font-style: italic;
}

.text blockquote .original { color: #6b5a44; }

.text .facts { list-style: none; padding: 0; }
.text .facts li { margin: 0 0 6px; }

.app-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin: 32px 0 10px;
  padding: 20px;
  border: 1px solid rgba(217, 180, 91, 0.65);
  border-radius: 12px;
  background: #0b0905;
  color: var(--ink);
}

.app-box img { width: 64px; height: 64px; border-radius: 14px; }
.app-box > div:first-of-type { flex: 1 1 240px; }
.app-box p { margin: 2px 0 0; color: var(--ink-soft); font: 400 17px var(--heading); }

.app-box .app-box-name {
  margin: 0;
  color: var(--gold);
  font: 400 21px var(--heading);
  text-transform: uppercase;
}

.app-box-stores { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; width: 100%; }

.app-box .store {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid #555;
  border-radius: 10px;
  background: #000;
  color: #fff;
  text-decoration: none;
}

.app-box .store svg { width: 24px; height: 24px; flex: none; fill: #fff; }
.app-box .store small { display: block; font-size: 11px; opacity: 0.8; }
.app-box .store b { display: block; font: 500 18px/1.1 var(--heading); white-space: nowrap; }
.app-box .store small { white-space: nowrap; }

.traditions .all-apps { text-align: center; color: var(--ink-soft); }
.traditions .all-apps a { color: var(--gold); }
.text .all-apps { text-align: center; font-size: 16px; }
.text .byline { margin-top: 18px; text-align: center; font-size: 15px; }
.text .byline a { color: #6b5a44; }

@media (max-width: 600px) {
  .app-box { justify-content: center; text-align: center; }
  .glyph-figure { width: 110px; margin-left: 14px; }
}