/* site.css -- THE HOME PAGE (index.html), 2026-10-27: the same hall as Town Hall (hall.css, its kit drawn in
   design/site/kit.py) -- the oak floor, the framed pictures, the parchment notices -- and the game's own scenes hung on its
   walls in oak frames, like paintings: the home island alive at the top, the field, the dock, the working face, the town,
   the year turning, the valley's places. */

.skip { position: absolute; left: -999px; top: 8px; z-index: 50; padding: 8px 12px; background: var(--brass); color: var(--ink); }
.skip:focus { left: 12px; }
.site main { display: block; }

/* the lintel's links */
.site-nav { display: flex; justify-content: center; gap: clamp(6px, 1.4vw, 18px); min-width: 0; overflow-x: auto; scrollbar-width: none; }
.site-nav::-webkit-scrollbar { display: none; }
.site-nav a { flex: none; padding: 8px 4px; font: 13px/1 var(--pixel); letter-spacing: 0.04em; color: var(--soft); text-decoration: none; -webkit-font-smoothing: none; text-shadow: 1px 1px 0 var(--ink); }
.site-nav a:hover, .site-nav a:focus-visible { color: var(--brass-hi); }
.sound.is-off .sound__on, .sound:not(.is-off) .sound__off { display: none; }
.sound:not(.is-off) { color: var(--brass-hi); }
a.sound-btn { color: var(--faint); }
a.sound-btn:hover { color: var(--cream); }

.site-title { margin: 0 0 12px; font: 30px/1.2 var(--pixel); color: var(--cream); text-shadow: 3px 3px 0 var(--ink); -webkit-font-smoothing: none; text-wrap: balance; }
.site-title--big { font-size: clamp(30px, 5vw, 44px); }
.site-lead { margin: 0 auto; max-width: 64ch; color: var(--soft); font-size: 18px; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.tags li { padding: 5px 9px 3px; font: 12px/1.2 var(--pixel); letter-spacing: 0.03em; color: var(--cream); background: var(--oak-2); box-shadow: inset 0 2px 0 var(--oak-3), inset 0 -2px 0 var(--oak-0), 0 0 0 2px var(--ink); -webkit-font-smoothing: none; }

/* ------------------------------------------------------------ the island, framed */
.site-hero { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: center; max-width: 1280px; margin: 0 auto; padding: 34px clamp(16px, 3vw, 32px) 30px; }
.site-hero__logo { margin: 0 0 4px -8px; line-height: 0; }
.site-hero__logo img { width: min(420px, 88vw); height: auto; image-rendering: auto; filter: drop-shadow(4px 5px 0 var(--ink)); }
.site-hero__tagline { margin: 0 0 18px; font: 21px/1.3 var(--pixel); color: var(--moss); text-shadow: 2px 2px 0 var(--ink); -webkit-font-smoothing: none; }
.site-hero__note p { margin: 0 0 16px; font-size: 18px; }
.site-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.site-hero__meta { margin: 14px 0 0 !important; font: 12px/1.4 var(--pixel) !important; letter-spacing: 0.08em; color: var(--parch-soft); text-transform: uppercase; -webkit-font-smoothing: none; }
.last .site-hero__meta { color: var(--faint); }
.site-hero__island { position: relative; margin: 0; background: #2f6fa8; }
.site-hero__island .hero__island { position: relative; height: min(66svh, 600px); min-height: 320px; }
.site .island { position: absolute; inset: 0; width: 100%; height: 100%; -webkit-mask-image: none; mask-image: none; image-rendering: pixelated; cursor: pointer; opacity: 0; transition: opacity 0.8s ease; }
.island-ready .site .island, .site.island-ready .island, html.island-ready .island { opacity: 1; }
.island-still { display: none; width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
html:not(.js) .island-still { display: block; }
.hero__hint { position: absolute; left: 50%; bottom: -30px; transform: translateX(-50%); padding: 4px 8px; background: rgba(36, 22, 15, 0.8); font: 11px/1 var(--pixel); letter-spacing: 0.1em; text-transform: uppercase; color: var(--cream); opacity: 0; transition: opacity 0.6s ease; pointer-events: none; -webkit-font-smoothing: none; white-space: nowrap; }
.hero__hint.is-on { opacity: 0.9; }
.hero__hint.is-done { opacity: 0; }

/* ------------------------------------------------------------ the proclamation, and the hall's rooms */
.proclaim { max-width: 900px; margin: 18px auto 0; padding: 0 clamp(16px, 3vw, 32px); }
.proclaim__paper { position: relative; text-align: center; padding-inline: clamp(8px, 3vw, 30px); }
.proclaim__paper p { max-width: 62ch; margin: 0 auto; }
.proclaim__paper .tags { justify-content: center; }
.proclaim__title { margin: 4px 0 12px; font: 28px/1.2 var(--pixel); color: var(--parch-ink); -webkit-font-smoothing: none; }
.proclaim__seal { position: absolute; top: -10px; right: 18px; width: 54px; height: 54px; image-rendering: pixelated; transform: rotate(8deg); filter: drop-shadow(3px 3px 0 rgba(36, 22, 15, 0.4)); }

.hall-rooms, .intro, .explore__head { max-width: 1180px; margin: 0 auto; padding: 64px clamp(16px, 3vw, 32px) 0; text-align: center; }
.rooms-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 28px; text-align: left; }
.room-card { display: grid; gap: 4px; align-content: start; color: var(--cream); text-decoration: none; transition: transform 0.15s ease; }
/* (align-content start, 2026-10-28: a card with a one-line note was stretched to its row's height and its title sank
   8px below its neighbours', Marketplace and Leaderboard lower than Holdings and Treasury) */
.room-card:hover { transform: translateY(-3px); }
.room-card:focus-visible { outline: 2px dashed var(--brass-hi); outline-offset: 6px; }
.room-card__bldg { --bh: 182px; display: grid; place-items: end center; height: var(--bh); background: #2e3b22; margin-bottom: 8px; }
.room-card__bldg { overflow: hidden; }
.room-card__bldg img { width: auto; height: auto; max-width: 100%; max-height: calc(var(--bh) - 48px); image-rendering: pixelated; }
.room-card__bldg--board { background: #9b6b3c url(/assets/town/kit/cork.png); background-size: 96px; place-items: center; }
.room-card__bldg--board img { width: 42px; height: 60px; }
.room-card b { font: 16px/1.2 var(--pixel); font-weight: normal; color: var(--brass-hi); text-shadow: 2px 2px 0 var(--ink); -webkit-font-smoothing: none; }
.room-card span:last-child { font-size: 15px; color: var(--soft); }
.room-card:hover b { color: var(--brass); }

/* ------------------------------------------------------------ the game: scenes framed on the wall, a notice beside each */
.life { max-width: 1180px; margin: 0 auto; padding: 36px clamp(16px, 3vw, 32px) 20px; display: grid; gap: 40px; }
.feature { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(18px, 3vw, 34px); align-items: center; }
.feature--flip .feature__scene { order: 2; }
.feature__scene canvas { display: block; width: 100%; aspect-ratio: 208 / 128; image-rendering: pixelated; background: #2b5a2e; }
.feature__words p { margin: 0 0 4px; }
.feature__title { margin: 2px 0 10px; font: 22px/1.25 var(--pixel); color: var(--parch-ink); -webkit-font-smoothing: none; text-wrap: balance; }

/* the year, turning as the page scrolls (seasons.js) */
.year { height: 400vh; }
.year__stick { position: sticky; top: 60px; height: calc(100svh - 60px); max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: minmax(300px, 440px) minmax(0, 1fr); align-items: center; gap: clamp(18px, 3vw, 40px); padding: 20px clamp(16px, 3vw, 32px); }
.year__words p { margin: 0 0 12px; }
.year__list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.year__list li { display: grid; grid-template-columns: 82px 1fr; gap: 10px; padding: 8px 10px; opacity: 0.42; transition: opacity 0.4s ease, background-color 0.4s ease; }
.year__name { font: 14px/1.5 var(--pixel); -webkit-font-smoothing: none; }
.year__line { font-size: 15px; line-height: 1.5; }
.year[data-season="spring"] li[data-season="spring"], .year[data-season="summer"] li[data-season="summer"],
.year[data-season="fall"] li[data-season="fall"], .year[data-season="winter"] li[data-season="winter"] { opacity: 1; background: rgba(240, 192, 74, 0.28); box-shadow: inset 4px 0 0 var(--brass-lo); }
.year__scene { height: min(70svh, 600px); background: #2f6fa8; }
.year__island { display: block; width: 100%; height: 100%; image-rendering: pixelated; -webkit-mask-image: none; mask-image: none; }

/* the valley's places */
.explore { padding-bottom: 20px; }
.places { max-width: 1180px; margin: 30px auto 0; padding: 0 clamp(16px, 3vw, 32px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.place__scene { display: block; width: 100%; aspect-ratio: 176 / 116; image-rendering: pixelated; background: #1d4f2c; }
.place__name { margin: 14px 0 6px; font: 18px/1.2 var(--pixel); color: var(--brass-hi); text-shadow: 2px 2px 0 var(--ink); -webkit-font-smoothing: none; }
.place p { margin: 0; font-size: 15.5px; color: var(--soft); }

/* the Founders and the pass, two notices side by side */
.pair { max-width: 1180px; margin: 0 auto; padding: 64px clamp(16px, 3vw, 32px) 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; align-items: start; }
.pair__card { position: relative; }
.pair__card p { margin: 0; }
.pair__card .px-btn { margin-top: 16px; }

.whisper { max-width: 900px; margin: 0 auto; padding: 64px clamp(16px, 3vw, 32px) 0; text-align: center; }
.whisper__scene { display: block; width: 100%; aspect-ratio: 300 / 76; image-rendering: pixelated; background: #0e1a2e; }
.whisper__line { margin: 18px 0 0; font: italic 20px/1.5 var(--book); color: var(--soft); }
.last { padding: 80px 16px 90px; text-align: center; }
.last .site-title { margin-bottom: 24px; }
.hall-foot__mark { display: block; width: 110px; height: auto; margin: 0 auto 10px; image-rendering: auto; opacity: 0.9; }

/* the notices come up softly as they scroll into view (main.js) */
.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.7s ease, transform 0.7s steps(8, end); transition-delay: calc(var(--i, 0) * 80ms); }
.js .reveal.is-in { opacity: 1; transform: none; }

@media (max-width: 1000px) {
  .site-hero { grid-template-columns: 1fr; }
  .site-hero__island .hero__island { height: min(70vw, 520px); }
  .rooms-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .places, .pair { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .site-nav { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; }
  .feature, .feature--flip { grid-template-columns: 1fr; }
  .feature--flip .feature__scene { order: 0; }
  .year { height: auto; }
  .year__stick { position: static; height: auto; grid-template-columns: 1fr; }
  .year__scene { height: 72vw; }
}
@media (max-width: 520px) {
  .rooms-row { grid-template-columns: 1fr; }
  .room-card__bldg { --bh: 130px; }
  .site-title { font-size: 24px; }
  .proclaim__seal { width: 40px; height: 40px; right: 4px; top: -22px; }
}
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .site .island { transition: none; }
}