/* The Gatehouse (direction A of the website's look: the user, 2026-11-13, "I still think A is the one"; "ok this can go
   live", 2026-11-14): the home page as a game portal, and a page for each weapon. Loaded after site.css by index.html
   and by the weapon pages (Hosting/weapons/build.mjs). The website layout rule holds: 1120 wide, thirds, halves or
   the whole row, gaps from 8, 16, 24, 32 and 48, every frame and button a kit piece. The new painted pieces are in
   assets/gate (the ChatGPT art chat, from the kit's own pieces): the notice sheet, the winged button, three
   medallions. The site's policy allows no inline style, so every picture and width here is a class. */

/* ---------- the winged button (assets/gate/playbtn.webp): the one big call on a page ---------- */
.seal {
  display: inline-grid; place-items: center; width: 330px; max-width: 100%; aspect-ratio: 1326 / 402; padding-top: 24px;
  background: url(gate/playbtn.webp) center / 100% 100% no-repeat;
  font: 600 22px/1 var(--heading); letter-spacing: 0.06em; color: #fff1e0; text-decoration: none;
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.7); filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.6));
  transition: filter 0.15s, transform 0.15s;
}
.seal:hover { color: #fff; filter: brightness(1.12) drop-shadow(0 10px 16px rgba(0, 0, 0, 0.6)); transform: translateY(-2px); }

/* ---------- the home page's hero: the pitch on the left, the news of the realm on its notice sheet ---------- */
.gate .hero { place-items: center; padding-bottom: 120px; }
.gh-in { position: relative; z-index: 1; width: min(1120px, 100%); display: grid; grid-template-columns: minmax(0, 1fr) 376px; gap: 48px; align-items: center; }
.gh-pitch { display: grid; gap: 16px; justify-items: start; text-align: left; }
.gh-pitch h1 { margin: 0; line-height: 0; }
.gh-pitch .logo-wrap { width: min(520px, 100%); margin-left: -12px; }
.gh-pitch .lead { margin: 0; font-size: 24px; max-width: 24ch; }
.gh-pitch .sub { margin: 0; }
.gh-pitch .cta { justify-content: flex-start; gap: 16px; margin-top: 8px; }
.gh-pitch .cta-note, .gh-pitch .welcome-back { margin: 0; }
/* the notice sheet: ink on parchment, its rail the kit's */
.gh-news {
  width: 100%; max-width: 376px; aspect-ratio: 758 / 1025; padding: 23% 11% 9% 11%; justify-self: center;
  display: grid; align-content: start; gap: 4px;
  background: url(gate/notice.webp) center / 100% 100% no-repeat; filter: drop-shadow(0 18px 24px rgba(0, 0, 0, 0.6));
}
.gh-news h2 { margin: 0; padding-bottom: 6px; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font: 600 15px/1 var(--heading); letter-spacing: 0.12em; text-transform: uppercase; color: #5a1d12; }
.gh-news h2 a { font: 700 13px/1 var(--ui); letter-spacing: 0; text-transform: none; color: #7a2418; }
.gh-news ul { margin: 0; padding: 0; list-style: none; }
.gh-news li a { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 12px; align-items: center; padding-block: 10px; border-top: 1px solid rgba(90, 58, 20, 0.35); text-decoration: none; }
.gh-news li img { width: 76px; height: 50px; object-fit: cover; border: 1px solid #5a3a14; }
.gh-news time { display: block; margin-bottom: 4px; font: 700 11px/1 var(--ui); letter-spacing: 0.16em; text-transform: uppercase; color: #7a4a1c; }
.gh-news b { display: block; font: 400 16px/1.2 var(--lore); color: #2e1c0c; }
.gh-news li a:hover b { color: #7a2418; }

/* ---------- the realm strip: three facts in one frame, on the hero's lower edge ---------- */
.gate .ld-wrap { position: relative; z-index: 2; }
.gh-realm {
  --fw: 14px; margin-top: -112px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 8px;
  border: var(--fw) solid transparent; border-image: var(--kit-frame) 120 fill / var(--fw) stretch; filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.55));
}
.gh-realm > div { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 16px; align-items: center; padding: 8px 24px; }
.gh-realm > div + div { border-left: 1px solid rgba(216, 182, 118, 0.16); }
.gh-realm img { width: 56px; height: 56px; object-fit: contain; }
.gh-realm p { margin: 0; }
.gh-realm b { display: block; font: 600 17px/1.2 var(--heading); color: var(--cream); }
.gh-realm span { font-size: 14.5px; color: var(--muted); }

/* the clip's three facts: a painted medallion each */
.gh-facts { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; color: #ddd0b4; }
.gh-facts li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 16px; align-items: center; min-height: 52px; }
.gh-facts li::before { content: ""; width: 52px; height: 52px; background: center / contain no-repeat; filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.6)); }
.gh-facts li:nth-child(1)::before { background-image: url(gate/b_free.webp); }
.gh-facts li:nth-child(2)::before { background-image: url(gate/b_browser.webp); }
.gh-facts li:nth-child(3)::before { background-image: url(gate/b_beta.webp); }
.gh-facts b { color: var(--cream); font-weight: 500; }

/* ---------- pick up a weapon: eight slots, each a door to its page ---------- */
.gh-weps { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 16px; }
.gh-wep { display: grid; gap: 8px; justify-items: center; text-align: center; text-decoration: none; }
.gh-wep i { display: grid; place-items: center; width: 100%; aspect-ratio: 1; background: var(--kit-slot) center / 100% 100% no-repeat; transition: filter 0.15s, transform 0.15s; }
.gh-wep i img { width: 70%; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.7)); }
.gh-wep:hover i { filter: brightness(1.35); transform: translateY(-3px); }
.gh-wep b { font: 400 16px/1.1 var(--display); letter-spacing: 0.06em; color: var(--cream); }

/* ---------- where the road goes: three zones as tall painted doors ---------- */
.gh-zones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.gh-zone { position: relative; isolation: isolate; margin: 0; aspect-ratio: 4 / 5; overflow: hidden; border: 10px solid transparent; border-image: var(--kit-frame) 120 / 10px stretch; }
.gh-zone img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; }
.gh-zone figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 64px 16px 16px; display: grid; gap: 4px; background: linear-gradient(180deg, rgba(10, 8, 6, 0), rgba(10, 8, 6, 0.92) 60%); }
.gh-zone b { font: 600 22px/1.15 var(--heading); color: var(--gold); }
.gh-zone span { font: italic 16.5px/1.35 var(--lore); color: var(--cream); }

/* ---------- the bestiary: six portraits in the map's dragon ring ---------- */
.gh-beasts { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 24px; }
.gh-beast { display: grid; gap: 8px; justify-items: center; text-align: center; text-decoration: none; }
.gh-medal { position: relative; width: 100%; aspect-ratio: 1; }
.gh-medal img { position: absolute; inset: 13%; width: 74%; height: 74%; border-radius: 50%; object-fit: cover; }
.gh-medal::after { content: ""; position: absolute; inset: 0; background: url(gate/ring.webp) center / contain no-repeat; }
.gh-beast b { font: 400 16px/1.1 var(--display); letter-spacing: 0.05em; color: var(--cream); }
.gh-beast:hover b, .gh-wep:hover b { color: var(--gold); }

/* ---------- the top of the ranks beside the last call ---------- */
.gh-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
.gh-board { --fw: 14px; padding: 16px; display: grid; gap: 16px; align-content: start; border: var(--fw) solid transparent; border-image: var(--kit-frame) 120 fill / var(--fw) stretch; filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.6)); }
.gh-board h2 { margin: 0; display: flex; justify-content: space-between; align-items: baseline; font: 600 20px/1 var(--heading); color: var(--gold); }
.gh-board h2 a { font: 500 14.5px/1 var(--ui); }
.gh-board ol { margin: 0; padding: 0; list-style: none; }
.gh-board li { display: grid; grid-template-columns: 24px 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 6px 8px; }
.gh-board li:nth-child(odd) { background: rgba(255, 255, 255, 0.03); }
.gh-board li i { font-style: normal; font-weight: 700; color: var(--bronze-hi); text-align: right; }
.gh-board li img { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--bronze); }
.gh-board li b { font: 400 17px/1.1 var(--display); letter-spacing: 0.04em; color: var(--cream); overflow-wrap: anywhere; }
.gh-board li span { font-size: 14.5px; color: var(--muted); }
.gh-board p { margin: 0; color: var(--muted); }
.gh-join { position: relative; isolation: isolate; overflow: hidden; display: grid; gap: 16px; align-content: center; justify-items: center; text-align: center; padding: 32px 24px; border: 14px solid transparent; border-image: var(--kit-frame) 120 / 14px stretch; }
.gh-join::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(rgba(12, 9, 7, 0.55), rgba(12, 9, 7, 0.8)), url(scenes/capital.webp) center / cover; }
.gh-join h2 { margin: 0; font: 600 clamp(24px, 3.6vw, 30px)/1.15 var(--heading); color: var(--gold); text-wrap: balance; }
.gh-join p { margin: 0; max-width: 40ch; color: #ddd0b4; }

@media (max-width: 900px) {
  .gh-in { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .gh-pitch { justify-items: center; text-align: center; }
  .gh-pitch .logo-wrap { margin-left: 0; }
  .gh-pitch .cta { justify-content: center; }
  .gh-duo { grid-template-columns: minmax(0, 1fr); }
  .gh-weps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .gh-beasts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .gh-realm { grid-template-columns: minmax(0, 1fr); }
  .gh-realm > div + div { border-left: 0; border-top: 1px solid rgba(216, 182, 118, 0.16); }
  .gh-zones { grid-template-columns: minmax(0, 1fr); }
  .gh-zone { aspect-ratio: 16 / 10; }
  .gh-pitch .lead { font-size: 21px; }
  .seal { width: 290px; font-size: 20px; padding-top: 21px; }
}

/* ---------- a weapon's page (/weapons/<key>, Hosting/weapons/build.mjs) ---------- */
.wp { flex: 1; }
.wp-lead { position: relative; isolation: isolate; padding: 48px 0 32px; }
.wp-lead::before { content: ""; position: absolute; inset: 0; z-index: -1; background: #120f0c right 30% / cover no-repeat; }
.wp-lead::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(18, 15, 12, 0.92) 0, rgba(18, 15, 12, 0.72) 26%, rgba(18, 15, 12, 0.12) 50%, rgba(18, 15, 12, 0) 62%),
    linear-gradient(180deg, rgba(18, 15, 12, 0.5), rgba(18, 15, 12, 0) 22%, rgba(18, 15, 12, 0) 62%, #120f0c 98%);
}
.wp-sword::before { background-image: image-set(url(weapons/sword.avif) type('image/avif'), url(weapons/sword.webp) type('image/webp')); }
.wp-sword2h::before { background-image: image-set(url(weapons/sword2h.avif) type('image/avif'), url(weapons/sword2h.webp) type('image/webp')); }
.wp-axe::before { background-image: image-set(url(weapons/axe.avif) type('image/avif'), url(weapons/axe.webp) type('image/webp')); }
.wp-axe2h::before { background-image: image-set(url(weapons/axe2h.avif) type('image/avif'), url(weapons/axe2h.webp) type('image/webp')); }
.wp-spear::before { background-image: image-set(url(weapons/spear.avif) type('image/avif'), url(weapons/spear.webp) type('image/webp')); }
.wp-javelin::before { background-image: image-set(url(weapons/javelin.avif) type('image/avif'), url(weapons/javelin.webp) type('image/webp')); }
.wp-knuckle::before { background-image: image-set(url(weapons/knuckle.avif) type('image/avif'), url(weapons/knuckle.webp) type('image/webp')); }
.wp-dagger::before { background-image: image-set(url(weapons/dagger.avif) type('image/avif'), url(weapons/dagger.webp) type('image/webp')); }
.wp-bow::before { background-image: image-set(url(weapons/bow.avif) type('image/avif'), url(weapons/bow.webp) type('image/webp')); }
.wp-crossbow::before { background-image: image-set(url(weapons/crossbow.avif) type('image/avif'), url(weapons/crossbow.webp) type('image/webp')); }
.wp-staff::before { background-image: image-set(url(weapons/staff.avif) type('image/avif'), url(weapons/staff.webp) type('image/webp')); }
.wp-tome::before { background-image: image-set(url(weapons/tome.avif) type('image/avif'), url(weapons/tome.webp) type('image/webp')); }
.wp-wrap { width: min(1120px, calc(100% - 32px)); margin: 0 auto; display: grid; gap: 24px; }
.wp-wrap > * { min-width: 0; }
.wp-crumb { margin: 0; font-size: 14px; color: var(--muted); }
.wp-crumb a { color: var(--text-2); }
.wp-slot { display: grid; place-items: center; width: 64px; aspect-ratio: 1; flex: none; background: var(--kit-slot) center / 100% 100% no-repeat; }
.wp-slot img { width: 74%; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.7)); }
.wp-slot.big { width: 128px; }
.wp-rack { display: flex; flex-wrap: wrap; gap: 8px; max-width: 560px; }
.wp-rack .wp-slot { width: 56px; opacity: 0.72; transition: opacity 0.15s, filter 0.15s; }
.wp-rack .wp-slot:hover { opacity: 1; filter: brightness(1.3); }
.wp-rack .wp-slot[aria-current] { opacity: 1; filter: drop-shadow(0 0 6px rgba(226, 194, 122, 0.9)) brightness(1.25); }
.wp-title { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 32px; align-items: center; max-width: 560px; padding-block: 24px 96px; }
.wp-title h1 { margin: 8px 0; font: 400 56px/1 var(--display); color: var(--gold); letter-spacing: 0.02em; }
.wp-title .lead { margin: 0; font-size: 20px; color: var(--cream); }
.wp-title h1, .wp-title .lead, .wp-title .eyebrow, .wp-crumb { text-shadow: 0 1px 2px #000, 0 0 10px rgba(0, 0, 0, 0.9), 0 0 22px rgba(0, 0, 0, 0.8); }
.wp-hands { margin: 0; font: 700 11.5px/1 var(--ui); letter-spacing: 0.18em; text-transform: uppercase; color: var(--teal-hi); }
/* the family as a tree: the main skill, this weapon, and the one it swaps to */
.wp-tree { --fw: 14px; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); padding: 8px; border: var(--fw) solid transparent; border-image: var(--kit-frame) 120 fill / var(--fw) stretch; }
.wp-tree > * { padding: 12px 24px; display: grid; gap: 6px; align-content: center; min-width: 0; }
.wp-tree > * + * { border-left: 1px solid rgba(216, 182, 118, 0.16); }
.wp-tree b { font: 600 20px/1.15 var(--heading); color: var(--cream); }
.wp-tree .wp-main span { font-size: 15px; color: var(--text-2); }
.wp-leaf { grid-template-columns: 64px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 16px; text-decoration: none; align-items: center; }
.wp-leaf .wp-slot { grid-row: 1 / 3; }
.wp-leaf .wp-hands { align-self: end; }
.wp-leaf b { align-self: start; }
.wp-leaf[aria-current] b, a.wp-leaf:hover b { color: var(--gold); }
.wp-halves { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; padding-block: 8px 48px; }
.wp-card { --fw: 14px; padding: 16px; display: grid; gap: 16px; align-content: start; min-width: 0; border: var(--fw) solid transparent; border-image: var(--kit-frame) 120 fill / var(--fw) stretch; filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.6)); }
.wp-card h2 { margin: 0; font: 600 26px/1.1 var(--heading); color: var(--gold); }
.wp-card h3 { margin: 8px 0 0; font: 600 13px/1 var(--heading); letter-spacing: 0.16em; text-transform: uppercase; color: var(--bronze-hi); }
.wp-card p { margin: 0; }
.wp-note { color: var(--text-2); font-size: 16px; border-left: 3px solid var(--bronze); padding-left: 12px; }
.wp-bars { display: grid; gap: 8px; }
.wp-bar { display: grid; grid-template-columns: 96px minmax(0, 1fr) 36px; gap: 12px; align-items: center; font-size: 15.5px; }
.wp-bar progress { appearance: none; -webkit-appearance: none; width: 100%; height: 12px; border: 1px solid var(--bronze-lo); background: #0a0c0b; }
.wp-bar progress::-webkit-progress-bar { background: #0a0c0b; }
.wp-bar progress::-webkit-progress-value { background: #b3261c; }
.wp-bar progress::-moz-progress-bar { background: #b3261c; }
.wp-bar.dex progress::-webkit-progress-value { background: #3f8f84; }
.wp-bar.dex progress::-moz-progress-bar { background: #3f8f84; }
.wp-bar b { font-weight: 700; color: var(--cream); text-align: right; }
.wp-facts { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.wp-facts div { padding: 8px 10px; border: 5px solid transparent; border-image: var(--kit-dark) 12 fill / 5px stretch; }
.wp-facts dt { margin-bottom: 4px; font: 700 11px/1 var(--ui); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.wp-facts dd { margin: 0; font-size: 15.5px; line-height: 1.25; color: var(--cream); }
.wp-swap { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px; align-items: center; padding: 8px 12px; text-decoration: none; color: var(--text-2); font-size: 15.5px; border: 6px solid transparent; border-image: var(--kit-dark) 12 fill / 6px stretch; }
.wp-swap b { display: block; margin-bottom: 2px; font: 600 16px/1.2 var(--heading); color: var(--cream); }
.wp-swap:hover { filter: brightness(1.2); color: var(--text); }
.wp-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.wp-list li { display: grid; grid-template-columns: 72px minmax(0, 1fr); column-gap: 12px; row-gap: 2px; }
.wp-list em { grid-row: 1 / 3; padding-top: 2px; font: 700 11.5px/1.5 var(--ui); font-style: normal; letter-spacing: 0.1em; text-transform: uppercase; color: var(--teal-hi); }
.wp-list b { font: 600 15.5px/1.2 var(--heading); color: var(--cream); }
.wp-list span { font-size: 15px; color: var(--text-2); }
.wp-ladder { margin: 0; padding: 0; list-style: none; }
.wp-ladder li { display: grid; grid-template-columns: 36px minmax(0, 1fr) 64px 48px 40px; gap: 8px; align-items: center; padding: 4px 8px; font-size: 15.5px; }
.wp-ladder li:nth-child(even) { background: rgba(255, 255, 255, 0.03); }
.wp-ladder img, .wp-ladder .wp-noic { width: 36px; height: 36px; }
.wp-ladder a, .wp-ladder b { font: 400 16.5px/1.1 var(--display); letter-spacing: 0.03em; color: var(--cream); text-decoration: none; }
.wp-ladder a:hover { color: var(--gold); }
.wp-ladder span { text-align: right; color: var(--text-2); font-variant-numeric: tabular-nums; }
.wp-ladder .wp-lh { font: 700 11px/1 var(--ui); letter-spacing: 0.12em; text-transform: uppercase; }
.wp-ladder .wp-lh b { font: inherit; color: var(--muted); }
.wp-ladder .wp-lh span { color: var(--muted); }
.wp-end { display: grid; gap: 16px; justify-items: center; text-align: center; padding-bottom: 64px; }
.wp-end h2 { margin: 0; font: 600 clamp(24px, 3.6vw, 30px)/1.15 var(--heading); color: var(--gold); }
.wp-end p { margin: 0; max-width: 52ch; color: #ddd0b4; }
@media (max-width: 900px) {
  .wp-halves, .wp-tree { grid-template-columns: minmax(0, 1fr); }
  .wp-tree > * + * { border-left: 0; border-top: 1px solid rgba(216, 182, 118, 0.16); }
  .wp-lead::before { background-position: 82% top; background-size: auto 62%; }
  .wp-lead::after { background: linear-gradient(180deg, rgba(18, 15, 12, 0.72), rgba(18, 15, 12, 0.3) 26%, rgba(18, 15, 12, 0.86) 52%, #120f0c 70%); }
  .wp-title { grid-template-columns: minmax(0, 1fr); gap: 16px; padding-block: 150px 8px; }
  .wp-title h1 { font-size: 42px; }
  .wp-slot.big { width: 96px; }
}
@media (max-width: 640px) {
  .wp-rack .wp-slot { width: 48px; }
  .wp-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wp-facts div:last-child { grid-column: 1 / -1; }
  .wp-ladder li { grid-template-columns: 32px minmax(0, 1fr) 52px 34px 30px; gap: 6px; padding-inline: 4px; }
  .wp-ladder img, .wp-ladder .wp-noic { width: 32px; height: 32px; }
  .wp-list li { grid-template-columns: minmax(0, 1fr); }
  .wp-list em { grid-row: auto; }
}

/* ---------- the home page's hero, after the user's look at it (2026-11-14) ----------
   "i dont know if the double logo is too much?": the bar's badge goes on the home page only, where the big logo stands
   right under it (its place is kept, so the links stay where they are on every other page).
   "the text here is quite hard to read": a dark wash under the pitch, strongest at the left and gone before the notice
   sheet, and the pitch's words heavier with a harder shadow. */
body:has(main.gate) .brand { visibility: hidden; }
/* no crest hangs under the bar here, so the bar keeps its short gap to the painting */
@media (min-width: 1100px) { body:has(main.gate) .top { margin-bottom: 20px; } }
.gate .hero::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(12, 9, 7, 0.86) 0, rgba(12, 9, 7, 0.7) 30%, rgba(12, 9, 7, 0.25) 52%, rgba(12, 9, 7, 0) 66%);
}
.gh-pitch .eyebrow, .gh-pitch .lead, .gh-pitch .sub, .gh-pitch .cta-note, .gh-pitch .welcome-back { text-shadow: 0 1px 2px #000, 0 0 8px rgba(0, 0, 0, 0.95), 0 0 18px rgba(0, 0, 0, 0.8); }
.gh-pitch .eyebrow { color: #8fe0d2; }
.gh-pitch .lead { color: #f3e3bd; }
.gh-pitch .sub { color: #fff6e2; font-weight: 500; max-width: 44ch; }
.gh-pitch .cta-note, .gh-pitch .welcome-back { color: #e4dcc8; }
@media (max-width: 900px) {
  .gate .hero::after { background: rgba(12, 9, 7, 0.55); }
}