/* EVENT RADAR — editorial layout
   Fonts: Oswald (display / Latin / numerals), BIZ UDPGothic (Japanese)
   Sizes: body 18px, article title 24px, display 96px. Content separated by rules, not boxes. */
:root {
  --ink: #1f1d1a;
  --ink-2: #514c46;
  --ink-3: #8a847c;
  --plane: #e9e7e2;     /* page ground */
  --plane-2: #dedbd4;
  --hair: #b9b4aa;      /* rules */
  --hair-strong: #1f1d1a;
  --acc: #e5583a;       /* coral / GP orange family */
  --acc-on: #ffffff;
  --map-land: #c9c4b9;
  --font-latin: "Oswald", "Arial Narrow", sans-serif;
  --font-ja: "BIZ UDPGothic", "BIZ UDPゴシック", "Yu Gothic UI", "Meiryo", sans-serif;
}
* { box-sizing: border-box; }
html { color-scheme: light; scroll-behavior: smooth; }
body { margin: 0; background: var(--plane); color: var(--ink); font-family: var(--font-ja); font-size: 18px; line-height: 1.75; -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, figure { margin: 0; }
a { color: inherit; }
b { font-weight: 700; }
.page { max-width: 1240px; margin: 0 auto; padding: 0 40px 40px; }
.lat { font-family: var(--font-latin); }
.rule { height: 1px; background: var(--hair); }
.lbl { font-family: var(--font-latin); font-size: 13px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-2); }

/* header */
.site-header { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 22px 0; border-bottom: 1px solid var(--hair); font-family: var(--font-latin); }
.nav-left { display: flex; gap: 10px; font-size: 14px; letter-spacing: .14em; }
.nav-left a { text-decoration: none; }
.nav-left a:hover { color: var(--acc); }
.slash { color: var(--ink-3); }
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.logo-mark { width: 30px; height: 30px; }
.logo-mark .sweep { transform-box: view-box; transform-origin: 24px 24px; animation: sweep 5s linear infinite; }
@keyframes sweep { 0% { transform: rotate(0deg); animation-timing-function: cubic-bezier(.05, .7, .2, 1); } 8% { transform: rotate(360deg); } 100% { transform: rotate(360deg); } }
.logo-word { font-family: var(--font-latin); font-size: 26px; font-weight: 600; letter-spacing: .1em; line-height: 1; }
.logo-word b { font-weight: 600; color: var(--acc); }
.logo-word.small { font-size: 32px; }
.nav-right { justify-self: end; font-size: 18px; font-weight: 600; letter-spacing: .08em; color: var(--acc); text-decoration: none; }
.nav-right::before { content: "/ "; color: var(--ink-3); font-weight: 300; }

/* hero */
.hero { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 40px; padding: 56px 0 40px; }
.display { font-family: var(--font-latin); font-weight: 600; font-size: 112px; line-height: .92; letter-spacing: .01em; text-transform: uppercase; }
.display .acc { color: var(--acc); font-weight: 600; }
.hero-side { padding-bottom: 12px; }
.tagline { font-size: 24px; font-weight: 700; line-height: 1.55; }
.kicker { font-family: var(--font-latin); font-size: 15px; letter-spacing: .2em; color: var(--ink-2); margin-top: 18px; }

/* map */
.map-section { padding-top: 0; }
.map-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 40px; padding: 28px 0 36px; align-items: center; }
.world-map { width: 100%; height: auto; display: block; }
.world-map .land { fill: var(--map-land); stroke: var(--map-land); stroke-width: .5; }
.world-map .ripple { fill: none; stroke: var(--acc); stroke-width: 1; vector-effect: non-scaling-stroke; transform-box: fill-box; transform-origin: center; animation: ripple 1.4s ease-out infinite; opacity: 0; }
@keyframes ripple { 0% { transform: scale(1); opacity: .6; } 100% { transform: scale(2.2); opacity: 0; } }
.world-map .pin-g { transform-box: view-box; transform: scale(2); }
.world-map .pin { fill: var(--acc); }
.world-map .leader { stroke: var(--acc); stroke-width: 1; vector-effect: non-scaling-stroke; }
.world-map .pin-dot { fill: var(--acc); }
.world-map .pin-num { fill: #fff; font-family: var(--font-latin); font-size: 15px; font-weight: 600; text-anchor: middle; dominant-baseline: central; }
.map-legend { list-style: none; margin: 0; padding: 0; }
.map-legend li { display: grid; grid-template-columns: 34px 1fr; gap: 12px; padding: 10px 0; border-top: 1px solid var(--hair); font-size: 15px; line-height: 1.5; }
.map-legend li:first-child { border-top: 0; }
.map-legend .n { font-family: var(--font-latin); font-size: 26px; font-weight: 600; line-height: 1; color: var(--acc); }
.map-legend a { text-decoration: none; font-weight: 700; }
.map-legend a:hover { color: var(--acc); }
.map-legend .place { display: block; font-weight: 400; color: var(--ink-3); font-size: 13px; }

/* ranking rows */
.month-tab { border-bottom: 1px solid var(--hair-strong); }
.month-tab span { display: inline-block; background: var(--ink); color: #fff; font-family: var(--font-latin); font-size: 15px; letter-spacing: .18em; padding: 12px 22px 10px; }
.rows { list-style: none; margin: 0; padding: 0; }
.row { opacity: 0; transform: translateY(18px); transition: opacity .7s ease-out, transform .7s cubic-bezier(.2,.7,.2,1); }
.row.in { opacity: 1; transform: none; }
.row { display: grid; grid-template-columns: 110px 300px minmax(0, 1fr) 60px; gap: 32px; padding: 34px 0; border-bottom: 1px solid var(--hair); align-items: start; }
.rank-col { font-family: var(--font-latin); text-align: center; }
.rank-col .crown { width: 28px; height: 28px; display: block; margin: 0 auto; color: var(--hair); }
.rank-col.rank-1 .crown { color: #d9a400; }
.rank-col.rank-2 .crown { color: #9aa3ad; }
.rank-col.rank-3 .crown { color: #b8773f; }
.rank-col .num { display: block; font-size: 64px; font-weight: 600; line-height: 1; margin-top: 4px; }
.row:first-child .rank-col .num { color: var(--acc); }
.thumb-wrap { position: relative; aspect-ratio: 4 / 3; background: var(--plane-2); overflow: hidden; }
.thumb-wrap::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, var(--acc) 0 60%, transparent 60%); }
.thumb { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(.9); }
.thumb-fallback { width: 100%; height: 100%; display: grid; place-items: center; font-family: var(--font-latin); font-size: 44px; font-weight: 300; letter-spacing: .1em; color: var(--ink-3); background: repeating-linear-gradient(135deg, var(--plane-2) 0 14px, #d4d0c8 14px 16px); }
.body-col { display: grid; gap: 10px; min-width: 0; }
.card-title { font-family: var(--font-latin), var(--font-ja); font-size: 24px; font-weight: 700; line-height: 1.35; letter-spacing: .01em; }
.card-title a { text-decoration: none; }
.card-title a:hover { color: var(--acc); }
.place-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 16px; color: var(--ink-2); }
.place-main { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.place-line svg { width: 14px; height: 14px; flex: none; }
.place-line .date { font-family: var(--font-latin); letter-spacing: .06em; color: var(--ink); margin-right: 6px; }
.place-name { white-space: nowrap; }
.place-line .cat { padding: 1px 8px; border: 1px solid var(--acc); color: var(--acc); font-size: 12px; font-weight: 700; letter-spacing: .06em; white-space: nowrap; }
.summary { font-size: 18px; color: var(--ink); }
.hint-line { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: baseline; padding-top: 10px; border-top: 1px dashed var(--hair); font-size: 17px; }
.hint-line .lbl { display: inline-block; background: #fff; color: var(--acc); border: 1.5px solid var(--acc); font-size: 12px; font-weight: 600; padding: 2px 9px 1px; white-space: nowrap; }
.source { font-family: var(--font-latin); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.source a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }
.source a:hover { color: var(--acc); }
.go { justify-self: end; align-self: start; color: var(--acc); }
.go svg { width: 34px; height: 34px; }
.go:hover svg { transform: translate(2px, -2px); }
.empty { padding: 40px 0; text-align: center; color: var(--ink-2); border-bottom: 1px solid var(--hair); }

/* CTA */
.cta { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 60px; padding: 72px 0 56px; align-items: stretch; }
.cta .display { font-size: 96px; }
.cta-lede { font-size: 18px; color: var(--ink-2); margin: 18px 0 30px; }
.cta-form { padding: 18px 0 14px; border-top: 1px solid var(--hair); display: grid; gap: 6px; min-width: 0; }
.cta-form > * { min-width: 0; }
.cta-form label { font-size: 17px; font-weight: 700; }
.cta-form label .lbl { display: inline-block; margin-right: 14px; padding: 3px 10px 2px; background: #fff; color: var(--acc); border: 1.5px solid var(--acc); font-size: 14px; font-weight: 600; letter-spacing: .2em; vertical-align: 2px; }
.field-row { display: flex; align-items: stretch; margin-top: 8px; }
.field-row input { flex: 1 1 0; width: 0; min-width: 0; font: inherit; font-size: 18px; padding: 12px 14px; border: 1.5px solid var(--hair-strong); border-right: 0; background: #fff; color: var(--ink); outline: 0; }
.field-row input::placeholder { color: var(--ink-3); }
.field-row input:focus { border-color: var(--acc); box-shadow: inset 0 0 0 1px var(--acc); }
.field-row button { font-family: var(--font-latin); font-size: 15px; font-weight: 600; letter-spacing: .14em; padding: 0 22px; border: 1.5px solid var(--acc); background: var(--acc); color: var(--acc-on); cursor: pointer; }
.field-row button:hover { filter: brightness(.93); }
.field-row button[disabled] { opacity: .6; cursor: progress; }
.hint { font-size: 14px; color: var(--ink-3); line-height: 1.6; }
.channels { border: 0; margin: 0 0 14px; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px; }
.lbl-plain { font-size: 17px; font-weight: 700; padding: 0; float: left; margin-right: 6px; }
.check { display: inline-flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 700; cursor: pointer; position: relative; }
.check input { position: absolute; opacity: 0; width: 0; height: 0; }
.check .box { width: 22px; height: 22px; border: 1.5px solid var(--hair-strong); background: #fff; position: relative; flex: none; }
.check input:checked + .box { background: var(--acc); border-color: var(--acc); }
.check input:checked + .box::after { content: ""; position: absolute; left: 7px; top: 2px; width: 6px; height: 12px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.check input:focus-visible + .box { outline: 3px solid rgba(229,88,58,.35); }
.form-msg .ok-line { color: #1f7a45; }
.form-msg .err-line { color: #b3261e; }
.form-msg span { display: block; font-weight: 700; }
.form-msg { font-size: 16px; min-height: 1.5em; }
.form-msg.ok { color: #1f7a45; font-weight: 700; }
.form-msg.err { color: #b3261e; font-weight: 700; }
.cta-visual { position: relative; display: flex; max-height: 640px; }
.cta-illust { width: 100%; height: 100%; min-height: 460px; display: block; }

/* archive */
.archive-row { display: grid; grid-template-columns: 110px 1fr; gap: 32px; align-items: baseline; padding: 20px 0 28px; }
.archive-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 22px; }
.archive-list a { font-family: var(--font-latin); font-size: 17px; letter-spacing: .06em; text-decoration: none; color: var(--ink-2); }
.archive-list a:hover, .archive-list a.current { color: var(--ink); border-bottom: 2px solid var(--acc); }

/* footer */
.foot-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; padding: 28px 0 0; align-items: end; }
.foot-desc { font-size: 15px; color: var(--ink-2); max-width: 30em; margin-top: 8px; }
.foot-note { font-size: 13px; color: var(--ink-3); text-align: right; }

/* responsive */
@media (max-width: 1000px) {
  .page { padding: 0 20px 32px; }
  .display { font-size: 84px; }
  .hero { grid-template-columns: 1fr; gap: 20px; }
  .map-grid { grid-template-columns: 1fr; gap: 20px; }
  .row { grid-template-columns: 80px minmax(0, 1fr) 44px; }
  .thumb-wrap { grid-column: 2; }
  .body-col { grid-column: 2; }
  .go { grid-column: 3; grid-row: 1; }
  .rank-col { grid-row: 1 / span 2; }
  .cta { grid-template-columns: 1fr; gap: 28px; }
  .cta .display { font-size: 72px; }
  .cta-illust { max-width: 380px; margin: 0 auto; }
  .foot-grid { grid-template-columns: 1fr; }
  .foot-note { text-align: left; }
}
@media (max-width: 700px) {
  .cta-visual { display: none; }
}
@media (max-width: 560px) {
  .site-header { grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 16px 0; }
  .nav-left { display: none; }
  .logo-word { font-size: 22px; }
  .nav-right { font-size: 15px; }
  .tagline { font-size: 20px; }
  .display, .cta .display { font-size: min(64px, 16vw); }
  .cta-text { min-width: 0; }
  .rank-col .num { font-size: 44px; }
  .world-map .pin-g { transform: scale(2.8); }
  /* subscribe: label on its own line, then the two checkboxes side by side */
  .channels { gap: 8px 24px; }
  .lbl-plain { float: none; flex-basis: 100%; margin: 0; }
  /* row 1: rank / image / arrow — row 2: title and everything below, full width */
  .row { grid-template-columns: 64px minmax(0, 1fr); gap: 14px; padding: 24px 0; }
  .rank-col { grid-row: 1; grid-column: 1; }
  .thumb-wrap { grid-row: 1; grid-column: 2; }
  .go { display: none; }
  .body-col { grid-row: 2; grid-column: 1 / -1; }
  .hint-line { grid-template-columns: 1fr; gap: 6px; }
  .hint-line .lbl { justify-self: start; }
  .archive-row { grid-template-columns: 1fr; gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .logo-mark .sweep, .world-map .ripple { animation: none; }
  .world-map .ripple { display: none; }
  .row { opacity: 1; transform: none; transition: none; }
}
@media print { .row { opacity: 1; transform: none; } }