/* Elements: the browsing half of the site.
 *
 * An element is one Pokémon type in one room. The room is the only place the
 * site is allowed to leave navy behind, so the colour is declared in exactly
 * one place -- the --el-* custom properties on body.element--<key> -- and
 * every rule below reads those. Adding an element is five lines here and a
 * species list in tools/import.py; no new selectors.
 *
 * The card grid itself is deliberately untouched: catalogue.css draws it on
 * every page in the same white, because a card photograph has to be read
 * against something neutral. The element colours the band, the type, the
 * accents and the edges -- never the shelf.
 */

/* ------------------------------------------------------------- palettes */

.element--fire {
  --el-deep:  #2b1006;
  --el-mid:   #8a3010;
  --el-glow:  #f9a825;
  --el-accent:#a13c12;
  --el-paper: #fffaf5;
  --el-wash:  #fdeccf;
  --el-rule:  #f0dfcd;
  /* Embers: two staggered fields of small dots, one light and one dark, which
     at this size read as heat coming off the band rather than as a dot grid. */
  --el-field:
    radial-gradient(circle at 20% 80%, var(--el-glow) 0 2px, transparent 2.6px),
    radial-gradient(circle at 70% 26%, var(--el-mid) 0 1.4px, transparent 2px);
  --el-field-size: 3.6rem 4.4rem, 5.6rem 4.8rem;
  --el-field-opacity: 0.5;
}
.element--water {
  --el-deep:  #07202f;
  --el-mid:   #0d5470;
  --el-glow:  #58c4e8;
  --el-accent:#0a5c79;
  --el-paper: #f6fbfd;
  --el-wash:  #ddf1f9;
  --el-rule:  #d8e8ef;
  /* Ripple: horizontal lines only, three spacings beating against each other,
     so the surface reads as water at rest and never as ruled paper. */
  --el-field:
    repeating-linear-gradient(180deg, var(--el-glow) 0 1.5px, transparent 1.5px 0.9rem),
    repeating-linear-gradient(180deg, var(--el-mid) 0 1px, transparent 1px 2.6rem),
    repeating-linear-gradient(180deg, var(--el-mid) 0 2px, transparent 2px 7.4rem);
  --el-field-size: auto;
  --el-field-opacity: 0.34;
}
.element--grass {
  --el-deep:  #0f2e1a;
  --el-mid:   #26663c;
  --el-glow:  #8fdc9e;
  --el-accent:#1f6b3c;
  --el-paper: #f7fdf8;
  --el-wash:  #dcf3e2;
  --el-rule:  #d1e7d7;
  /* Blades: two hatches leaning opposite ways off the vertical, the light one
     dense and the dark one sparse, which reads as growth rather than as plaid. */
  --el-field:
    repeating-linear-gradient(76deg, var(--el-glow) 0 2px, transparent 2px 0.85rem),
    repeating-linear-gradient(104deg, var(--el-mid) 0 1.5px, transparent 1.5px 2.3rem);
  --el-field-size: auto;
  --el-field-opacity: 0.32;
}
.element--lightning {
  --el-deep:  #2e2306;
  --el-mid:   #7d5c06;
  --el-glow:  #fbd24e;
  --el-accent:#7a5a05;
  --el-paper: #fffdf4;
  --el-wash:  #fdf1cd;
  --el-rule:  #eee1bd;
  /* Crackle: two steep hatches crossing at an angle nothing else here uses,
     so the field is a mesh of narrow diamonds -- charge, not stripes. */
  --el-field:
    repeating-linear-gradient(74deg, var(--el-mid) 0 1.5px, transparent 1.5px 1.1rem),
    repeating-linear-gradient(-74deg, var(--el-glow) 0 2px, transparent 2px 1.1rem);
  --el-field-size: auto;
  --el-field-opacity: 0.4;
}
.element--psychic {
  --el-deep:  #241041;
  --el-mid:   #5b2d91;
  --el-glow:  #cfa8f5;
  --el-accent:#6b34a8;
  --el-paper: #fdfaff;
  --el-wash:  #ece0fb;
  --el-rule:  #e0d3f2;
  /* Rings: two sets of concentric circles spreading from points the band's own
     light does not sit on, which is interference and belongs to no other type
     here. The only field drawn with repeating-radial-gradient. */
  --el-field:
    repeating-radial-gradient(circle at 78% 16%, transparent 0 1.5rem,
      var(--el-mid) 1.5rem calc(1.5rem + 1.5px)),
    repeating-radial-gradient(circle at 14% 88%, transparent 0 2.3rem,
      var(--el-glow) 2.3rem calc(2.3rem + 2px));
  --el-field-size: auto;
  --el-field-opacity: 0.42;
}
.element--fighting {
  --el-deep:  #3a1f0a;
  --el-mid:   #7a4420;
  --el-glow:  #e0a86b;
  --el-accent:#8a4c20;
  --el-paper: #fffaf3;
  --el-wash:  #f6e6d2;
  --el-rule:  #e9d8c3;
  /* Tiled stone: a checker, which is a shape no other type here uses and the
     reason fighting no longer reads as a second, coarser fire. */
  --el-field:
    repeating-conic-gradient(from 0deg at 50% 50%,
      var(--el-mid) 0% 25%, transparent 25% 50%);
  --el-field-size: 3.2rem 3.2rem;
  --el-field-opacity: 0.16;
}
.element--darkness {
  --el-deep:  #0b131c;
  --el-mid:   #2b3a4c;
  --el-glow:  #8fa3b8;
  --el-accent:#33465c;
  --el-paper: #f7f9fb;
  --el-wash:  #e4eaf0;
  --el-rule:  #dae2ea;
  /* Stars: three fields of very small points at three spacings, the sparsest
     one brightest. The only field meant to be noticed after the page has been
     read rather than while reading it. */
  --el-field:
    radial-gradient(circle at 20% 24%, var(--el-glow) 0 1.6px, transparent 2.2px),
    radial-gradient(circle at 72% 68%, var(--el-mid) 0 1.2px, transparent 1.7px),
    radial-gradient(circle at 46% 12%, var(--el-mid) 0 1px, transparent 1.4px);
  --el-field-size: 6.5rem 7rem, 4rem 4.4rem, 2.4rem 2.7rem;
  --el-field-opacity: 0.55;
}
.element--metal {
  --el-deep:  #1c2833;
  --el-mid:   #465c72;
  --el-glow:  #cfd8e3;
  --el-accent:#4d647b;
  --el-paper: #f8fafc;
  --el-wash:  #e6ecf2;
  --el-rule:  #dbe3ec;
  /* Brushed: vertical hairlines only, very fine and very close, the way a
     rolled sheet catches light. Water runs the other way on purpose. */
  --el-field:
    repeating-linear-gradient(90deg, var(--el-glow) 0 1px, transparent 1px 0.35rem),
    repeating-linear-gradient(90deg, var(--el-mid) 0 1.5px, transparent 1.5px 1.9rem);
  --el-field-size: auto;
  --el-field-opacity: 0.4;
}
.element--dragon {
  --el-deep:  #0e1f45;
  --el-mid:   #1b3f8f;
  --el-glow:  #a8c6f2;
  --el-accent:#23499b;
  --el-paper: #f8fbff;
  --el-wash:  #dfe9fb;
  --el-rule:  #d6e2f6;
  /* Scale: one arc per cell, two cells offset from each other, so the arcs
     read as an overlapping hide rather than as rows of circles. */
  --el-field:
    radial-gradient(circle at 50% 118%, var(--el-glow) 0 5px, transparent 5.8px),
    radial-gradient(circle at 0% 118%, var(--el-mid) 0 5px, transparent 5.6px);
  --el-field-size: 1.8rem 1.15rem, 1.8rem 1.15rem;
  --el-field-opacity: 0.5;
}
.element--fairy {
  --el-deep:  #4a0a33;
  --el-mid:   #a01e63;
  --el-glow:  #f7a8cd;
  --el-accent:#ab2168;
  --el-paper: #fffafc;
  --el-wash:  #fce0ee;
  --el-rule:  #f4d2e3;
  /* Bokeh: soft-edged points rather than the hard ones fire and darkness use,
     large and unhurried, which is light out of focus and not glitter. */
  --el-field:
    radial-gradient(circle at 38% 32%, var(--el-glow) 0%, transparent 42%),
    radial-gradient(circle at 76% 72%, var(--el-mid) 0%, transparent 34%);
  --el-field-size: 5.5rem 6rem, 3.4rem 3.7rem;
  --el-field-opacity: 0.5;
}
.element--colorless {
  --el-deep:  #2b2721;
  --el-mid:   #6b6459;
  --el-glow:  #cfc8bb;
  --el-accent:#6f6759;
  --el-paper: #fdfcfa;
  --el-wash:  #efece6;
  --el-rule:  #e6e2da;
  /* Plain weather: one wide hatch, and nothing else. The type is the absence
     of a type, and the room should feel like open air rather than a theme. */
  --el-field:
    repeating-linear-gradient(58deg, var(--el-mid) 0 1.5px, transparent 1.5px 2.4rem);
  --el-field-size: auto;
  --el-field-opacity: 0.4;
}

/* ---------------------------------------------------------- element page */

.page-element {
  /* The element reaches the whole page, not only its band: two very pale
     washes, one at each end, over the element's own paper. */
  background:
    radial-gradient(60rem 40rem at 92% 4%, var(--el-wash) 0%, transparent 64%),
    radial-gradient(50rem 36rem at -8% 96%, var(--el-wash) 0%, transparent 62%),
    var(--el-paper);
  background-attachment: fixed, fixed, scroll;
}
.page-element ::selection { background: var(--el-accent); color: #fff; }
.page-element .crumb { background: var(--el-paper); border-bottom-color: var(--el-rule); }
.page-element .crumb a:hover, .page-element .crumb__back:hover { color: var(--el-accent); }
.page-element .tools { background: var(--el-paper); border-color: var(--el-rule); }
.page-element .tools__count b { color: var(--el-accent); }
.page-element .minisearch:focus-within { border-color: var(--el-accent); }
.page-element .shelf__head h2 { color: var(--el-deep); }
.page-element .dateline { color: var(--el-accent); }
.page-element .card:hover { border-color: var(--el-accent); }
.page-element .card__price { color: var(--el-accent); }
.page-element .sheet__go { background: var(--el-mid); }
.page-element .sheet__go:hover { background: var(--el-deep); }

/* The band. Daylight rather than nightfall: the type's own light over its
   paper, its glyph as a watermark, and the ink dark enough to read at any
   size. The dark version of this band was handsome and made the top of every
   type page a hole in the site. */
.elband {
  position: relative;
  overflow: hidden;
  color: var(--el-deep);
  /* The band is the one place the type gets to be its colour, so it is mixed
     from --el-glow and --el-mid rather than from the two pale washes: the
     first version leaned on --el-wash, which on the paler types (metal,
     colorless, darkness) is within a few percent of white and read as no
     colour at all. Everything here is a color-mix of the palette, so a type
     is still five lines of custom properties and nothing else. */
  background:
    radial-gradient(88% 132% at 90% -22%,
      color-mix(in srgb, var(--el-glow) 88%, transparent) 0%, transparent 62%),
    radial-gradient(72% 112% at 3% 4%,
      color-mix(in srgb, var(--el-mid) 24%, transparent) 0%, transparent 72%),
    linear-gradient(168deg,
      color-mix(in srgb, var(--el-mid) 26%, var(--el-paper)) 0%,
      color-mix(in srgb, var(--el-glow) 46%, var(--el-paper)) 46%,
      color-mix(in srgb, var(--el-glow) 16%, var(--el-paper)) 100%);
  border-bottom: 1px solid color-mix(in srgb, var(--el-mid) 34%, var(--el-rule));
}
/* Every type's own weather, drawn in gradients so it costs no markup and no
   two types draw the same figure: blades, embers, ripples, crackle, rings,
   tiles, stars, brushed steel, scales, bokeh, one open hatch. Set per type in
   the palettes above; the geometry is what tells them apart, not only the
   hue, so the pattern survives being seen next to its neighbour. */
.elband::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--el-field, none);
  background-size: var(--el-field-size, auto);
  opacity: var(--el-field-opacity, 0.5);
  pointer-events: none;
}
.elband::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: linear-gradient(90deg, var(--el-mid) 0%, var(--el-glow) 38%, transparent 88%);
  opacity: 0.7;
}
.elband__glow {
  position: absolute;
  top: -46%;
  right: -8%;
  width: 44rem;
  height: 44rem;
  border-radius: 50%;
  background: radial-gradient(circle, var(--el-glow) 0%, transparent 64%);
  opacity: 0.22;
  filter: blur(4px);
  pointer-events: none;
}
.elband__mark {
  position: absolute;
  right: 5%;
  bottom: -20%;
  width: 21rem;
  height: auto;
  color: var(--el-mid);
  opacity: 0.18;
  pointer-events: none;
}
.elband__inner {
  position: relative;
  padding-block: clamp(2.5rem, 6.5vw, 4.75rem) clamp(1.8rem, 3.5vw, 2.75rem);
}
.elband .dateline { color: var(--el-accent); }
.elband h1 {
  margin: 0.7rem 0 0;
  font-size: clamp(2.6rem, 8vw, 5rem);
  line-height: 0.98;
  letter-spacing: -0.015em;
  color: var(--el-deep);
}
.elband .setband__facts { color: var(--el-mid); }
.elband .setband__facts b { color: var(--el-deep); }

/* Below the band, the element has to keep going, or the page reverts to a set
   page with a coloured hat. Three cheap layers do it: the toolbar tinted and
   ruled in the element's colour, a hairline under the shelf heading that fades
   the way the band's does, and the element's own weather again -- fainter --
   across the closing section. All gradients: no markup, nothing to load, and
   the card grid itself stays white. */
.page-element .tools {
  background: color-mix(in srgb, var(--el-wash) 46%, rgba(255, 255, 255, 0.95));
  border-bottom-color: var(--el-rule);
  box-shadow: 0 1px 0 0 color-mix(in srgb, var(--el-glow) 45%, transparent);
}
.page-element .tools select,
.page-element .minisearch { border-color: var(--el-rule); }

/* Waiting for the rest of the shelf. Most of an element arrives as data a
   moment after the page does, and a search box that can only see the first
   sixty cards would answer wrongly, so the tools are held until the whole
   shelf is there. Held, and visibly so: dimmed, with the cursor saying wait.
   It is a few hundred milliseconds, and the sixty cards below are readable
   throughout. */
.page-element .tools.is-loading .minisearch,
.page-element .tools.is-loading select { opacity: 0.5; cursor: progress; }
.page-element .tools.is-loading .minisearch input { cursor: progress; }

/* And if that fetch never lands: the shelf keeps the cards it was written
   with, the tools come back for them, and the note says which shelf this is
   rather than pretending it is the whole one. */
.page-element .tools.is-partial .tools__note::after {
  content: " The rest of this element did not load \2014 reload, or open any set for its own full shelf.";
  color: var(--el-accent);
}

.page-element .shelf__head {
  position: relative;
  padding-bottom: 1.7rem;
}
.page-element .shelf__head::after {
  content: "";
  position: absolute;
  inset: auto 0 0.9rem 0;
  height: 2px;
  background: linear-gradient(90deg, var(--el-mid) 0%, var(--el-glow) 34%, transparent 82%);
  opacity: 0.5;
}

/* A small glyph beside the shelf's own heading, so the element is present
   further down the page than the band and not only at the top of it. */
.shelf__glyph {
  width: 1.15rem;
  height: auto;
  margin-right: 0.5rem;
  vertical-align: -0.1em;
  color: var(--el-accent);
  opacity: 0.9;
}
.page-element .funnel {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--el-paper) 0%, var(--el-wash) 100%);
  border-top: 1px solid var(--el-rule);
}
/* The same weather as the band, at a third of the strength: the room closes
   the way it opened. */
.page-element .funnel::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--el-field, none);
  background-size: var(--el-field-size, auto);
  opacity: calc(var(--el-field-opacity, 0.4) * 0.34);
  pointer-events: none;
}
.page-element .funnel > * { position: relative; }
.page-element .funnel__head h2 { color: var(--el-deep); }
/* The doors keep their target element's colour on hover -- that is the point
   of them -- so only the resting border is tinted to this room. */
.page-element .el-door { border-color: var(--el-rule); }

/* Other elements, at the foot of an element page. */
.el-next {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0.9rem;
}
.el-door {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--rule-white);
  border-radius: 0.7rem;
  background: #fff;
  text-decoration: none;
  color: var(--ink);
  transition: border-color 0.22s var(--ease), transform 0.22s var(--ease);
}
.el-door:hover { border-color: var(--dot); transform: translateY(-2px); }
.el-door--soon { opacity: 0.55; border-style: dashed; }
.el-door__dot {
  width: 1.5rem;
  height: 1.5rem;
  flex: none;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, var(--dot-light), var(--dot));
}
/* An open element swaps the dot for its own glyph: the ink is the type's dark
   colour on a wash of the light one, the same pairing the tiles use. */
.el-door__dot--sym {
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 0.5rem;
  color: var(--dot);
  background: var(--white-cool);
  background: color-mix(in srgb, var(--dot-light) 22%, #fff);
}
.el-door__dot--sym svg { width: 62%; height: auto; }
.el-door__name { font-size: 0.98rem; }
.el-door__n {
  display: block;
  font-size: 0.76rem;
  color: var(--muted);
  font-variant-numeric: lining-nums;
}
.el-next__note { margin: 1.4rem 0 0; font-size: 0.9rem; color: var(--muted); }
.el-next__note a { color: var(--el-accent); }

/* ---------------------------------------------------------- the categories */
/* /elements.html is an index, not a display: a visitor is deciding which room
   to walk into, so each open type gets one wide tile that states what is behind
   it, and the nine unopened ones are a plain roll of names. The type's colour
   arrives on the tile as --cat / --cat-light, written inline by the importer,
   which keeps the palette in one table in tools/import.py rather than growing a
   CSS rule per type. */

.page-cats { background: var(--white); color: var(--ink-white); }
.catsband__inner { padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(1rem, 2vw, 1.6rem); }
.catsband h1 {
  margin: 0.8rem 0 0;
  font-size: clamp(2.4rem, 6.5vw, 4rem);
  line-height: 1.02;
  letter-spacing: -0.015em;
  color: var(--navy-deep);
}
.catsband__sub {
  margin: 1.1rem 0 0;
  max-width: 56ch;
  font-size: clamp(1rem, 1.5vw, 1.12rem);
  color: var(--muted);
}
.cats { padding-block: clamp(1rem, 3vw, 2rem) clamp(3rem, 7vw, 5.5rem); }

/* A rule with the heading sitting on it, the count at the far end: the same
   grammar the set index uses on the home page. */
.cats__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--rule-white);
}
.cats__head h2 {
  margin: 0;
  font-size: clamp(1.1rem, 2vw, 1.3rem);
  color: var(--navy-deep);
}
.cats__head--soon { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.cats__head .dateline { margin: 0; font-variant-numeric: lining-nums; }

.cats__grid {
  display: grid;
  gap: 0.85rem;
  /* Eleven tiles at a 23rem minimum came out two across and six rows deep, so
     choosing a type meant scrolling past most of them. At 17.5rem the same
     measure holds three across and the whole set is visible at once, which is
     the only thing an index of eleven rooms has to do. */
  grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr));
  margin-top: 1.4rem;
}

/* The tile is the element: the whole card carries its colour, with the glyph
   watermarked large behind the type's name. */
.cat {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.9rem;
  padding: 1.15rem 1.25rem;
  overflow: hidden;
  border: 0;
  border-radius: 0.9rem;
  background: var(--cat);
  background:
    radial-gradient(90% 120% at 92% 2%, var(--cat-light) 0%, transparent 52%),
    linear-gradient(155deg, var(--cat) 0%, color-mix(in srgb, var(--cat) 62%, #000) 100%);
  text-decoration: none;
  color: #fff;
  box-shadow: 0 0.5rem 1.4rem -0.9rem var(--cat);
  transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease);
}
/* The glyph again, large and faint, filling the tile behind its own name. */
.cat__art {
  position: absolute;
  right: -1.9rem;
  bottom: -2.6rem;
  width: 9.5rem;
  height: auto;
  color: #fff;
  opacity: 0.14;
  pointer-events: none;
}
.cat:hover, .cat:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 1.1rem 2.4rem -0.9rem var(--cat);
}
.cat__glyph {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  flex: none;
  border-radius: 0.65rem;
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
}
.cat__glyph svg { width: 58%; height: auto; }
.cat__body { display: block; min-width: 0; }
.cat__name {
  display: block;
  position: relative;
  font-size: clamp(1.3rem, 2.1vw, 1.5rem);
  line-height: 1.1;
  color: #fff;
}
.cat__meta {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.7rem;
  line-height: 1.5;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  color: var(--cat-light);
  font-variant-numeric: lining-nums;
}
.cat__go {
  align-self: start;
  margin-top: 0.35rem;
  font-size: 1.2rem;
  color: #fff;
  opacity: 0.9;
  transition: transform 0.22s var(--ease);
}
.cat:hover .cat__go { transform: translateX(3px); }

/* Named, not offered. No border, no pointer, nothing that invites a click. */
.cats__soon {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.6rem;
  margin: 1.2rem 0 0;
  padding: 0;
  list-style: none;
}
.cat-soon {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.95rem;
  color: var(--ink-soft);
}
.cat-soon__dot {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: linear-gradient(150deg, var(--cat-light) 0%, var(--cat) 100%);
  opacity: 0.55;
}
.cats__note {
  margin: clamp(2.2rem, 4vw, 3rem) 0 0;
  max-width: 52ch;
  font-size: 0.92rem;
  color: var(--muted);
}
.cats__note b { color: var(--navy-deep); font-variant-numeric: lining-nums; }

@media (max-width: 30rem) {
  .cat { padding: 1.1rem 1.15rem; gap: 0.9rem; }
  .cat__glyph { width: 2.9rem; height: 2.9rem; }
  .cat__name { font-size: 1.3rem; }
}
@media (prefers-reduced-motion: reduce) {
  .cat:hover, .cat:focus-visible, .el-door:hover { transform: none; }
  .cat:hover .cat__go { transform: none; }
}

/* ------------------------------------------------------------- the habitat */

/* The type's mark standing in both page margins. Fixed rather than scrolled:
   the shelf moves through the room, the room stays. It sits at z-index 0 with
   the page chrome lifted to 1 above it, so the leaves pass behind the crumb
   bar and the cards instead of over them. */
.elflanks {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
/* The footer is in normal flow, so without a layer of its own the fixed
   leaves would pass in front of it rather than behind. */
.page-element .crumb,
.page-element .colophon,
.page-element main { position: relative; z-index: 1; }

.elflank {
  position: absolute;
  top: 0;
  bottom: 0;
  /* The margin outside the shell, whatever that is at this width: half of
     what the viewport has over the measure, less the gutter it keeps. */
  width: calc((100vw - var(--bleed)) / 2 + var(--gutter) * 0.6);
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  color: var(--el-accent);
}
.elflank--l { left: 0; }
.elflank--r { right: 0; }
.elflank svg {
  width: 62%;
  max-width: 9rem;
  height: auto;
  aspect-ratio: 1;
  flex: none;
}

/* No two marks in a column sit at the same size, tilt or weight, or the
   margin reads as a printed border rather than as growth. */
.elflank svg:nth-child(1) { opacity: 0.16; rotate: -13deg; scale: 0.82; }
.elflank svg:nth-child(2) { opacity: 0.11; rotate:   9deg; scale: 1.12; }
.elflank svg:nth-child(3) { opacity: 0.14; rotate: -21deg; scale: 0.9; }
.elflank--r svg:nth-child(1) { rotate: 16deg; scale: 1.06; }
.elflank--r svg:nth-child(2) { rotate: -11deg; scale: 0.86; opacity: 0.15; }
.elflank--r svg:nth-child(3) { rotate: 7deg; scale: 1.0; opacity: 0.1; }

/* Below the measure plus a usable margin there is nowhere for them to stand
   without crowding the cards, so the room falls back to its band. */
@media (max-width: 90rem) { .elflanks { display: none; } }

/* A visible keyboard target on the tiles: they carry their own colour, so an
   outline in the type's light reads on every one of the eleven. */
.cat:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}