/* Zukama website. A thin bar of links, then a live scene from the game with the
   crest and the name big in the sky (Stardew Valley's first screen, Jay, Oct 26),
   then night blue bands in the colours of the game's own front door. */

@font-face { font-family: "Cinzel"; src: url("../fonts/Cinzel-Bold.ttf"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Rounded"; src: url("../fonts/MPlusRounded1c-Medium.ttf"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Rounded"; src: url("../fonts/MPlusRounded1c-ExtraBold.ttf"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Lilita"; src: url("../fonts/LilitaOne-Regular.ttf"); font-display: swap; }

:root {
  /* The bar takes the blue of the sky, the bands the navy of the game's title screen */
  --bar: #1f4f8f;
  --bar-edge: #163a6b;
  --navy: #141a3c;
  --navy-2: #1c2350;
  --navy-3: #0e1230;
  --edge: #0b0f26;
  --line: #2c3566;
  --gold: #ffd84a;
  --gold-2: #e9a21e;
  --teal: #2fbf8f;
  --cream: #f4efe2;
  --soft: #b9bfd8;
  --faint: #8f97bd;
  --ink: #1d140b;
  /* The game's menu type for reading and labels, its banner type for headlines */
  --text-font: "Rounded", "Segoe UI", sans-serif;
  --headline: "Lilita", "Rounded", sans-serif;
  --title: "Cinzel", Georgia, serif;
}

* { box-sizing: border-box; }

html { background: var(--navy-3); }

body {
  margin: 0;
  font: 500 16px/1.6 var(--text-font);
  color: var(--cream);
  background: var(--navy-3);
  overflow-x: hidden;
}

a { color: var(--gold); }
a:hover { color: #fff; }
img { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.trap { display: none; }

/* Bar */

.bar {
  position: relative;
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 48px;
  background: var(--bar);
  border-bottom: 2px solid var(--bar-edge);
}
.bar .links { display: flex; gap: 44px; }
.bar a { color: #fff; text-decoration: none; font-weight: 800; font-size: 15px; letter-spacing: .6px; text-transform: uppercase; }
.bar a:hover { color: var(--gold); }
.bar a.on { color: var(--gold); }
.bar .bar-news { position: absolute; right: 28px; color: var(--gold); }
.bar .bar-news:hover { color: #fff; }
.mark, .menu { display: none; }

/* The maintenance notice. A navy plate under the bar with the game's gold diamond and rule,
   only while an update is planned (js/maintenance.js). */

.notice { background: var(--navy-2); border-bottom: 2px solid var(--gold-2); }
.notice[hidden], .notice [hidden] { display: none; }
.notice .wrap { display: flex; justify-content: center; align-items: center; gap: 14px; padding-top: 11px; padding-bottom: 11px; text-align: center; }
.notice i { flex: none; width: 11px; height: 11px; background: var(--gold); transform: rotate(45deg); }
.notice p { margin: 0; font-size: 15px; line-height: 1.45; color: var(--cream); }
.notice b { color: #fff; }
.notice .notice-note { color: var(--gold); }

/* Banner. A live scene from the game's own town stage layers, the hills and
   the village drifting a little with the pointer, monsters wandering the grass. */

.banner { position: relative; overflow: hidden; }
.banner.tall { height: calc(100vh - 48px); min-height: 640px; max-height: 960px; }
.banner.short { height: 460px; }
.scene { position: absolute; inset: 0; }
.layer { position: absolute; left: -20px; right: -20px; background-repeat: repeat-x; transition: transform .6s ease-out; }
.sky { inset: 0; background: url("../img/stage/town_sky.png") 20% 0 / cover; }
.clouds {
  top: 50px;
  height: 150px;
  background: url("../img/stage/town_clouds.png") 0 0 / auto 150px repeat-x;
  animation: drift 160s linear infinite;
}
@keyframes drift { to { background-position: -1641px 0; } }
.far { bottom: 190px; height: 220px; background-image: url("../img/stage/town_far.png"); background-size: auto 220px; background-position: 40% 0; }
.mid { bottom: 118px; height: 290px; background-image: url("../img/stage/town_mid.png"); background-size: auto 290px; background-position: 50% 0; }
/* The ground is laid as the game lays it. The grass strip is drawn whole, its lower edge
   fading out, over the soil, which starts 45 px down the strip with its first row on the
   strip's walking line, 3 px down. So the two melt into one piece of ground. */
.ground { position: absolute; left: 0; right: 0; bottom: 31px; height: 87px; background: url("../img/stage/ground.png") 0 0 repeat-x; }
.soil { position: absolute; left: 0; right: 0; bottom: 0; height: 73px; background: url("../img/stage/soil.png") 0 -42px repeat; }
.ground .plant { position: absolute; bottom: 73px; }
.ground .sprite { position: absolute; bottom: 59px; }
.walker { position: absolute; left: 0; bottom: 63px; background-repeat: no-repeat; image-rendering: pixelated; will-change: transform; }
.walker[data-cell="112"] { width: 112px; height: 112px; }
.walker[data-cell="128"] { width: 128px; height: 128px; }
@keyframes walk { to { background-position: var(--strip) 0; } }

.title { position: absolute; left: 50%; top: 5%; z-index: 2; width: min(960px, 94vw); transform: translateX(-50%); text-align: center; }
.name { display: inline-block; text-decoration: none; }
.name img { width: 170px; margin: 0 auto -10px; filter: drop-shadow(0 6px 0 rgba(20, 40, 80, .25)); }
.wordmark {
  margin: 0;
  font: 700 140px/1 var(--title);
  letter-spacing: 10px;
  text-transform: uppercase;
  color: var(--gold);
  -webkit-text-stroke: 7px var(--ink);
  paint-order: stroke fill;
  text-shadow: 0 8px 0 var(--ink);
}

/* Inner pages keep the scene shorter, the crest beside the name */
.short .far { bottom: 150px; height: 160px; background-size: auto 160px; }
.short .mid { bottom: 104px; height: 220px; background-size: auto 220px; }
/* On the home page the line and the Play Now button sit under the name, so the
   name and the hills give a little room, more so on a short screen */
.tall .title { top: 4%; }
.tall .name img { width: clamp(96px, 16vh, 150px); }
.tall .wordmark { font-size: clamp(70px, 12.5vh, 124px); }
.tall .far { bottom: 168px; height: 200px; background-size: auto 200px; }
.tall .mid { bottom: 118px; height: 250px; background-size: auto 250px; }
.tagline { margin: 14px auto 0; font-weight: 800; font-size: 23px; line-height: 1.4; color: #fff; text-shadow: 0 2px 0 #1d2a4a, 0 0 8px rgba(20, 30, 60, .6); }
/* Play Now is the big one, with a glint that crosses it now and then */
.play { margin-top: 20px; padding: 23px 58px 22px; font-size: 29px; letter-spacing: 4px; }
.play::before { --notch: 24px; }
.play::after {
  --notch: 22px;
  background:
    linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .55) 50%, transparent 65%) -150% 0 / 50% 100% no-repeat,
    linear-gradient(#fff1b3, #ffde64 36%, #f8c23a 62%, #ef901e);
  animation: glint 5s ease-in-out 1.5s infinite;
}
@keyframes glint { 0%, 70% { background-position: -150% 0, 0 0; } 100% { background-position: 250% 0, 0 0; } }
.alpha { display: inline-block; margin-left: 10px; padding: 5px 8px 4px; font: 800 11px/1 var(--text-font); letter-spacing: 1.5px; vertical-align: 4px; text-shadow: none; color: var(--gold); background: var(--navy); }
.play-note { display: table; margin: 12px auto 0; padding: 4px 12px; font-weight: 800; font-size: 15px; color: #fff; background: rgba(14, 18, 48, .6); }

.short .title { top: 40px; width: auto; }
.short .name { display: flex; align-items: center; gap: 18px; white-space: nowrap; }
.short .name img { width: 84px; margin: 0; }
.short .wordmark { font-size: 88px; letter-spacing: 7px; -webkit-text-stroke-width: 5px; text-shadow: 0 6px 0 var(--ink); }

/* Sprite sheets. Eight frames at 6 fps, one frame drawn at a time, no blending. */

.sprite {
  display: inline-block;
  background-repeat: no-repeat;
  image-rendering: pixelated;
  animation: idle 1.3333s steps(8) infinite;
}
.sprite.npc { width: 128px; height: 128px; --strip: -1024px; }
.sprite.mob { width: 112px; height: 112px; --strip: -896px; }
.hettie { background-image: url("../img/sprites/hettie_idle.png"); }
.fenn { background-image: url("../img/sprites/fenn_idle.png"); transform: scaleX(-1); }
.nettle { background-image: url("../img/sprites/nettle_idle.png"); }
.burrlet { background-image: url("../img/sprites/burrlet_idle.png"); }
.pipsprout { background-image: url("../img/sprites/pipsprout_idle.png"); }
.glimmer_moth { background-image: url("../img/sprites/glimmer_moth_idle.png"); }
.bogglow { background-image: url("../img/sprites/bogglow_idle.png"); }
.cairnling { background-image: url("../img/sprites/pebble_golem_idle.png"); }
.thornback_boar { background-image: url("../img/sprites/thornback_boar_idle.png"); }
.conekin { background-image: url("../img/sprites/conekin_idle.png"); }
@keyframes idle { to { background-position: var(--strip) 0; } }

/* Bands */

.band { padding: 84px 0; background: var(--navy-3); }
.band.alt { background: var(--navy); }
.band.head { padding: 56px 0 8px; }
.band.head + .band { padding-top: 36px; }
.wrap { max-width: 1160px; margin: 0 auto; padding: 0 40px; }
.narrow { max-width: 860px; }
.kicker { margin: 0 0 6px; font-weight: 800; font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: var(--teal); }
h2 { margin: 0 0 24px; font: 400 42px/1.1 var(--headline); color: #fff; }
h3 { margin: 0; font: 400 24px/1.15 var(--headline); color: #fff; }
.lead { max-width: 760px; margin: -8px 0 34px; font-size: 18px; color: var(--soft); }
.lead b { color: #fff; }
.more { display: inline-block; margin-top: 24px; font-weight: 800; letter-spacing: .5px; text-decoration: none; }
.more:hover { text-decoration: underline; }
.small { margin: 8px 0 0; font-size: 13px; color: var(--faint); }
.card { background: var(--navy-2); border: 2px solid var(--edge); }

/* Buttons. The gold button from the game's own title screen (ENTER ZUKAMA): a notched
   plate running from pale gold to orange inside a night blue outline, spaced capitals,
   standing on a short hard shadow. The outline and the plate are two notched layers
   behind the words, so the shadow can follow the notches. */

.btn {
  position: relative;
  z-index: 0;
  display: inline-block;
  padding: 15px 32px 14px;
  font: 700 15px/1 var(--title);
  letter-spacing: 3px;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--navy);
  text-shadow: 0 1px 0 rgba(255, 246, 210, .7);
  background: none;
  border: 0;
  cursor: pointer;
  filter: drop-shadow(0 4px 0 rgba(6, 8, 22, .5));
  transition: transform .12s ease-out, filter .12s ease-out;
}
.btn::before, .btn::after {
  content: "";
  position: absolute;
  z-index: -1;
  clip-path: polygon(var(--notch) 0, calc(100% - var(--notch)) 0, 100% 50%, calc(100% - var(--notch)) 100%, var(--notch) 100%, 0 50%);
}
.btn::before { inset: 0; --notch: 16px; background: #121430; }
.btn::after {
  inset: 3px;
  --notch: 14.5px;
  background: linear-gradient(#fff1b3, #ffde64 36%, #f8c23a 62%, #ef901e);
}
.btn:hover { color: var(--navy); transform: translateY(-1px); filter: drop-shadow(0 5px 0 rgba(6, 8, 22, .5)) brightness(1.06); }
.btn:active { transform: translateY(3px); filter: drop-shadow(0 1px 0 rgba(6, 8, 22, .5)); }
.btn:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }

/* Help test. Three steps to apply, each a numbered card, then the gold button to Spark. */

.steps { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.steps li { display: grid; grid-template-columns: 52px 1fr; gap: 18px; align-items: start; padding: 20px 22px; background: var(--navy-2); border: 2px solid var(--edge); }
.steps .n { display: grid; place-items: center; width: 52px; height: 52px; font: 400 28px/1 var(--headline); color: var(--navy); background: linear-gradient(#fff1b3, #ffde64 36%, #f8c23a 62%, #ef901e); }
.steps h3 { margin: 2px 0 6px; }
.steps p { margin: 0; color: var(--soft); }
.steps-go { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 30px; margin-top: 32px; }
.steps-go .more { margin-top: 0; }
.steps-note { margin-top: 18px; }

/* Rankings. The game's boards as one table, the first three places in gold as on the noticeboard. */

.rk-classes { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; padding: 0; list-style: none; }
.rk-classes[hidden] { display: none; }
.rk-classes a { display: flex; align-items: center; gap: 6px; padding: 5px 12px 5px 8px; font-weight: 800; font-size: 14px; text-decoration: none; color: var(--soft); background: var(--navy-2); border: 2px solid var(--edge); }
.rk-classes li:first-child a { padding-left: 12px; }
.rk-classes img { width: 24px; height: 24px; }
.rk-classes a:hover, .rk-classes a.on { color: var(--gold); border-color: var(--gold-2); }
.ranks table { width: 100%; border-collapse: collapse; background: var(--navy-2); border: 2px solid var(--edge); font-variant-numeric: tabular-nums; }
.ranks table[hidden] { display: none; }
.ranks th { padding: 12px 16px; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; text-align: left; color: var(--teal); background: var(--navy); border-bottom: 2px solid var(--edge); }
.ranks td { padding: 9px 16px; border-top: 1px solid var(--line); }
.ranks tbody tr:first-child td { border-top: 0; }
.ranks .rk-at { width: 76px; }
.ranks td.rk-at { color: var(--soft); }
.ranks .rk-who { font-weight: 800; color: #fff; overflow-wrap: anywhere; }
.ranks .rk-cls { width: 150px; }
.ranks td.rk-cls { color: var(--soft); }
.ranks .rk-cls img { display: inline-block; width: 26px; height: 26px; margin: -4px 8px -4px 0; vertical-align: middle; }
.ranks .rk-num { width: 96px; text-align: right; }
.ranks table:not(.has-value) .rk-value { display: none; }
.ranks tr.rk-top td { background: rgba(255, 216, 74, .06); }
.ranks tr.rk-top .rk-at, .ranks tr.rk-top .rk-who { color: var(--gold); }
.ranks-note { margin: 0; padding: 22px 24px; color: var(--soft); background: var(--navy-2); border: 2px solid var(--edge); }
.ranks-note[hidden] { display: none; }
.ranks-made { margin-top: 14px; }

/* Launch News. The form posts to the studio's newsletter on solderspark.com. */

.signup { padding: 64px 0 70px; text-align: center; background: var(--navy-2); border-top: 2px solid var(--edge); border-bottom: 2px solid var(--edge); }
.signup .wrap { max-width: 680px; }
.signup h2 { margin-bottom: 8px; }
.signup p { margin: 0 auto 22px; color: var(--soft); }
.signup form { display: flex; max-width: 540px; margin: 0 auto; padding: 8px 8px 8px 18px; background: var(--navy-3); border: 2px solid var(--edge); }
.field { flex: 1; min-width: 0; margin-right: 14px; padding: 8px 2px; font: 500 16px var(--text-font); color: #fff; background: none; border: 0; border-bottom: 2px solid var(--teal); border-radius: 0; }
.field::placeholder { color: var(--faint); }
.field:focus { outline: none; border-bottom-color: var(--gold); }
.signup .small { margin: 12px 0 0; }
.signup [hidden] { display: none; }
.thanks { max-width: 540px; margin: 0 auto; padding: 18px; background: var(--navy-3); border: 2px solid var(--edge); }
.thanks p { margin: 0; }
.thanks b { color: #fff; }

/* Home */

.shots { display: grid; grid-template-columns: 1.8fr 1fr; gap: 26px; align-items: start; }
.shots .big img { border: 3px solid var(--edge); outline: 2px solid var(--gold-2); outline-offset: -1px; }
.thumbs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.thumbs a { text-decoration: none; font-size: 13px; font-weight: 800; color: var(--soft); }
.thumbs a:hover { color: #fff; }
.thumbs img { margin-bottom: 4px; border: 2px solid var(--edge); }

.classes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.classes article { padding: 22px 20px 20px; }
.classes img { width: 76px; margin-bottom: 10px; }
.classes h3 { font-size: 26px; }
.sub { margin: 2px 0 8px; font-weight: 800; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gold); }
.classes p:last-child { margin: 0; font-size: 15px; color: var(--soft); }

.posts { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 18px; }
.posts a { display: block; text-decoration: none; }
.posts a:hover h3 { color: var(--gold); }
.posts .pic { height: 190px; display: grid; place-items: center; background-size: cover; background-position: center; border-bottom: 2px solid var(--edge); }
.posts .pic img { width: 96px; }
.posts .txt { padding: 16px 18px 20px; }
.posts h3 { margin: 4px 0 6px; }
.posts .txt p:last-child { margin: 0; font-size: 15px; color: var(--soft); }
.ember { background-color: #3a1f16; }
.ice { background-color: #2a4a66; }
.meta { margin: 0; font-weight: 800; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--teal); }
.meta time { margin-left: 8px; color: var(--faint); }

.regions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.regions a { height: 300px; display: flex; align-items: flex-end; background-size: cover; background-position: center; border: 2px solid var(--edge); text-decoration: none; }
.regions a div { width: 100%; padding: 14px 16px; background: rgba(14, 18, 48, .88); }
.regions h3 { font-size: 22px; }
.regions a:hover h3 { color: var(--gold); }
.regions span { font-weight: 800; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gold); }

/* Page heads and their in-page links */

.toc { display: flex; flex-wrap: wrap; gap: 8px 26px; margin: 0; padding: 14px 0 0; border-top: 2px solid var(--line); list-style: none; }
.toc a { font-weight: 800; text-decoration: none; color: var(--soft); }
.toc a:hover, .toc a.on { color: var(--gold); }
.toc em { margin-left: 6px; font-style: normal; font-size: 12px; color: var(--faint); }

/* News. Days divide the posts, smaller posts carry a picture beside them. */

.archive { display: grid; gap: 16px; }
.archive .day { margin: 20px 0 0; font-weight: 800; font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: var(--teal); }
.archive .day:first-child { margin-top: 0; }
.archive article { display: flex; gap: 18px; padding: 20px; scroll-margin-top: 16px; }
.archive article.lead-post { display: block; }
.archive article[hidden], .archive .day[hidden] { display: none; }
.archive .lead-post > img { width: 100%; height: 260px; object-fit: cover; margin-bottom: 16px; border: 2px solid var(--edge); }
.archive h3 { margin: 4px 0 8px; font-size: 26px; }
.archive p { margin: 0 0 10px; color: var(--soft); }
.archive p:last-child { margin-bottom: 0; }
.archive .signoff { margin-top: 14px; font-weight: 800; color: var(--cream); }
.archive .meta time { display: none; }
.post { flex: 1; min-width: 0; }
.thumb { position: relative; flex: none; width: 140px; height: 100px; overflow: hidden; display: grid; place-items: center; border: 2px solid var(--edge); background: var(--navy-3); }
.thumb img { width: 64px; }
/* A small strip of ground, the grass and the soil scaled together, the soil a band under the grass */
.thumb-town {
  display: block;
  background:
    url("../img/stage/ground.png") 0 100% / auto 40px repeat-x,
    url("../img/stage/soil.png") 0 calc(100% + 55px) / auto 74px repeat-x,
    #bfdcef;
}
.thumb-town .sprite { position: absolute; left: 50%; bottom: 8px; margin-left: -64px; }

/* Guide */

.sections { display: grid; gap: 18px; }
.sections > .card { padding: 26px 28px; scroll-margin-top: 16px; }
.sections h2 { margin-bottom: 14px; font-size: 32px; }
.sections p { margin: 0 0 12px; color: var(--soft); }
.sections p:last-child { margin-bottom: 0; }
.sections ol { margin: 0 0 12px; padding-left: 22px; color: var(--soft); }
.sections li { margin: 4px 0; }
.glance { display: flex; flex-wrap: wrap; gap: 8px 30px; margin: 18px 0 0; }
.glance div { display: flex; gap: 10px; align-items: baseline; }
.glance dt { font-weight: 800; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--faint); }
.glance dd { margin: 0; font-weight: 800; color: #fff; }
.class-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 4px; }
.class-list article { display: flex; gap: 14px; padding: 14px; background: var(--navy-3); border: 2px solid var(--edge); }
.class-list img { flex: none; width: 64px; height: 64px; }
.class-list p:last-child { margin: 0; font-size: 15px; }
.sections .sub { margin: 2px 0 6px; color: var(--gold); }
.sections .kicker { margin: 0 0 6px; color: var(--teal); }
.sections > .spot { padding: 0; }
.figure { float: right; width: 120px; height: 120px; margin: 0 0 10px 18px; display: grid; place-items: center; border: 2px solid var(--edge); }
.figure img { width: 84px; }
kbd {
  display: inline-block;
  min-width: 26px;
  padding: 1px 7px;
  font: 800 13px/1.5 var(--text-font);
  text-align: center;
  color: #fff;
  background: var(--navy-3);
  border: 1px solid #3b4478;
  border-bottom-width: 3px;
  border-radius: 4px;
}
.keys { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; margin-bottom: 14px; }
.keys dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; margin: 0; align-items: center; }
.keys dt { white-space: nowrap; }
.keys dd { margin: 0; font-size: 15px; color: var(--soft); }

/* A monster standing on a strip of the Hearthside Trail */
.spot { display: grid; grid-template-columns: 260px 1fr; align-items: center; }
.stage {
  height: 150px;
  display: grid;
  place-items: end center;
  background:
    url("../img/stage/ground.png") 0 100% / auto 48px repeat-x,
    url("../img/stage/soil.png") 0 calc(100% + 65px) / auto 88px repeat-x,
    url("../img/stage/hearthside_mid.png") 40% 100% / auto 160px repeat-x,
    #bfdcef;
  border-right: 2px solid var(--edge);
}
.stage .sprite { margin-bottom: 30px; }
.spot > div { padding: 18px 24px; }
.spot h3 { margin: 2px 0 6px; }
.spot p:last-child { margin: 0; color: var(--soft); }

/* The World. Each region is its sky with one of its monsters, beside a few lines. */

.region { display: grid; grid-template-columns: 1.15fr 1fr; scroll-margin-top: 16px; }
.region:nth-child(even) .region-art { order: 2; border-right: 0; border-left: 2px solid var(--edge); }
.region-art { min-height: 260px; display: grid; place-items: end center; background-size: cover; background-position: center 60%; border-right: 2px solid var(--edge); }
.region-art .sprite { margin-bottom: 8px; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .35)); }
.region > div:last-child { padding: 26px 28px; align-self: center; }
.region h2 { margin-bottom: 4px; font-size: 32px; }
.region p { margin: 12px 0 0; color: var(--soft); }

/* Media */

.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.gallery a { position: relative; display: block; overflow: hidden; background: #000; border: 2px solid var(--edge); }
.gallery img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform .25s, opacity .25s; }
.gallery a:hover img { transform: scale(1.04); opacity: .9; }
.gallery span { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 10px 6px; font-weight: 800; font-size: 13px; color: #fff; background: linear-gradient(transparent, rgba(0, 0, 0, .78)); }
.gallery.shots-all { grid-template-columns: repeat(2, 1fr); }
.gallery.shots-all a:first-child { grid-column: 1 / -1; }
.section + .section { margin-top: 64px; }
.section > p { margin: -12px 0 20px; color: var(--soft); }

.bestiary { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 10px; }
.bestiary figure { margin: 0; display: flex; flex-direction: column; align-items: center; padding: 6px 0 10px; background: var(--navy-2); border: 2px solid var(--edge); }
.bestiary .pen { position: relative; width: 112px; height: 112px; }
.bestiary .sprite { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%) scale(var(--fit, 1)); transform-origin: 50% 100%; }
.bestiary figcaption { font-size: 14px; font-weight: 800; text-align: center; line-height: 1.25; }
.bestiary small { display: block; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--gold); }

.lightbox { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 24px; background: rgba(6, 8, 22, .94); }
.lightbox[hidden] { display: none; }
.lightbox figure { margin: 0; max-width: min(1280px, 100%); }
.lightbox img { max-width: 100%; max-height: calc(100vh - 110px); margin: 0 auto; border: 2px solid var(--edge); }
.lightbox figcaption { margin-top: 10px; text-align: center; font: 20px var(--headline); color: var(--cream); }
.lightbox button { flex: none; width: 44px; height: 44px; font-size: 30px; line-height: 1; color: var(--cream); background: var(--navy-2); border: 2px solid var(--edge); cursor: pointer; }
.lightbox button:hover { color: var(--gold); }
.lightbox .lb-close { position: absolute; top: 14px; right: 14px; }

/* Footer. The ground the page stands on, the town's grass over its soil. */

.foot {
  position: relative;
  padding: 104px 16px 30px;
  text-align: center;
  font-size: 14px;
  color: #f0e2c0;
  background: var(--navy-3);
}
.foot::before, .foot::after { content: ""; position: absolute; left: 0; right: 0; }
.foot::before { top: 45px; bottom: 0; background: url("../img/stage/soil.png") 0 -42px repeat; }
.foot::after { top: 0; height: 87px; background: url("../img/stage/ground.png") 0 0 repeat-x; }
.foot nav, .foot p { position: relative; z-index: 1; }
.foot nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 26px; margin-bottom: 8px; }
.foot a { font-weight: 800; color: #fff; text-decoration: none; text-shadow: 0 1px 0 #000; }
.foot a:hover { color: var(--gold); }
.foot p { margin: 0; text-shadow: 0 1px 0 #000; }

@media (prefers-reduced-motion: reduce) {
  .sprite, .clouds, .play::after { animation: none; }
  .layer, .btn { transition: none; }
}

/* Narrower screens */

@media (max-width: 1100px) {
  .bar .links { gap: 28px; }
  .bar .bar-news { display: none; }
  .classes { grid-template-columns: 1fr 1fr; }
  .regions { grid-template-columns: 1fr 1fr; }
  .regions a { height: 220px; }
}

@media (max-width: 760px) {
  .notice .wrap { justify-content: flex-start; text-align: left; }
  .notice p { font-size: 14px; }

  /* A ranking keeps its place, name, class picture and numbers, and drops the class's name */
  .ranks th, .ranks td { padding: 8px 10px; }
  .ranks .rk-at { width: 52px; }
  .ranks .rk-cls { width: 46px; font-size: 0; }
  .ranks .rk-cls img { margin: -4px 0; }
  .ranks .rk-num { width: auto; }

  /* The bar keeps the crest and a Menu button, which opens the links one per line */
  .bar { justify-content: space-between; padding: 0 16px; }
  .bar .links, .bar .bar-news { display: none; }
  .mark, .menu { display: block; }
  .mark img { width: 30px; }
  .menu summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; color: #fff; font-weight: 800; font-size: 15px; letter-spacing: .6px; text-transform: uppercase; }
  .menu summary::-webkit-details-marker { display: none; }
  .menu summary i, .menu summary i::before, .menu summary i::after { position: relative; display: block; width: 20px; height: 3px; background: #fff; border-radius: 1px; }
  .menu summary i::before, .menu summary i::after { content: ""; position: absolute; left: 0; }
  .menu summary i::before { top: -7px; }
  .menu summary i::after { top: 7px; }
  .menu[open] summary i { background: transparent; }
  .menu[open] summary i::before { top: 0; transform: rotate(45deg); }
  .menu[open] summary i::after { top: 0; transform: rotate(-45deg); }
  .menu-links { position: absolute; left: 0; right: 0; top: 100%; padding: 6px 0 10px; background: var(--bar); border-bottom: 2px solid var(--bar-edge); }
  .menu-links a { display: block; padding: 12px 22px; font-size: 17px; letter-spacing: .4px; border-top: 1px solid rgba(255, 255, 255, .12); }
  .menu-links a:first-child { border-top: 0; }
  .menu-links a.gold { color: var(--gold); }

  .banner.tall { height: 720px; min-height: 0; }
  .banner.short { height: 360px; }
  .far { bottom: 196px; height: 200px; background-size: auto 200px; }
  .mid { bottom: 112px; height: 260px; background-size: auto 260px; background-position: 30% 0; }
  .short .far { bottom: 130px; height: 130px; background-size: auto 130px; }
  .short .mid { bottom: 96px; height: 180px; background-size: auto 180px; }
  .ground .wide { display: none; }
  .title, .tall .title { top: 48px; }
  .name img, .tall .name img { width: 104px; }
  .tall .wordmark { font-size: 62px; }
  .tall .far { bottom: 168px; height: 170px; background-size: auto 170px; }
  .tall .mid { bottom: 112px; height: 210px; background-size: auto 210px; }
  .tagline { margin-top: 12px; font-size: 17px; }
  .play { margin-top: 16px; padding: 17px 34px 16px; font-size: 19px; letter-spacing: 3px; }
  .play::before { --notch: 18px; }
  .play::after { --notch: 16.5px; }
  .play-note { font-size: 13px; padding: 4px 10px; }
  .wordmark { font-size: 62px; letter-spacing: 4px; -webkit-text-stroke-width: 4px; text-shadow: 0 5px 0 var(--ink); }
  .short .title { top: 30px; }
  .short .name { gap: 10px; }
  .short .name img { width: 52px; }
  .short .wordmark { font-size: 46px; letter-spacing: 3px; -webkit-text-stroke-width: 3px; text-shadow: 0 4px 0 var(--ink); }

  .band { padding: 56px 0; }
  .band.head { padding: 36px 0 4px; }
  .band.head + .band { padding-top: 24px; }
  .wrap { padding: 0 16px; }
  h2 { font-size: 32px; }
  .lead { font-size: 16px; }
  .signup { padding: 44px 0 50px; }
  .signup form { flex-direction: column; gap: 12px; padding: 14px; }
  .field { margin: 0; }
  .shots, .posts { grid-template-columns: 1fr; }
  .classes { gap: 12px; }
  .classes article { padding: 16px 14px; }
  .classes img { width: 56px; }
  .classes h3 { font-size: 22px; }
  .classes p:last-child { font-size: 14px; }
  .regions { gap: 10px; }
  .regions a { height: 180px; }
  .archive article { gap: 12px; padding: 16px; }
  .archive .lead-post > img { height: 170px; }
  .archive h3 { font-size: 22px; }
  .thumb { width: 92px; height: 72px; }
  .thumb img { width: 48px; }
  .sections > .card { padding: 20px 18px; }
  .sections h2 { font-size: 27px; }
  .class-list, .keys { grid-template-columns: 1fr; }
  .keys dl + dl { margin-top: 8px; }
  .figure { width: 90px; height: 90px; }
  .figure img { width: 62px; }
  .spot { grid-template-columns: 1fr; }
  .stage { border-right: 0; border-bottom: 2px solid var(--edge); }
  .region { grid-template-columns: 1fr; }
  .region:nth-child(even) .region-art { order: 0; border-left: 0; }
  .region-art { min-height: 170px; border-right: 0; border-bottom: 2px solid var(--edge); }
  .region > div:last-child { padding: 18px; }
  .region h2 { font-size: 27px; }
  .gallery { grid-template-columns: 1fr 1fr; gap: 8px; }
  .lightbox { padding: 12px 4px; gap: 4px; }
}