/* Hallmark · shape: Bento Grid (draw b3ff9e) · genre: editorial · theme: brand · redesign: full
 * paper: var(--keio-paper-raised) · accent: var(--keio-accent), the line of the day · display: NewRodin Pro · body: NewRodin Pro · hero: Poster · nav: edge-aligned · footer: letter close · signature: the departure board as the site's navigation, live data on every row
 * axes: light/display-heavy/chromatic-line · posture: Restrained · surface: absolute (station-sign white, brand) · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H5 E4 S5 R4 V4 · weakest: P, a profile has no argument of its own; leaned on the station metaphor (sign, board, platform notice) so every block is a railway object, not a card */
/* Hallmark · waive 7b · --keio-paper #ffffff is set in railway/railway.css :root by the Railway spec · station-sign white is the brand's paper, kept verbatim */
/* Hallmark · waive 3 · the 4px accent left bar on .callout, .board comes from the Railway GUIDE § hierarchy · it is the brand's platform-board device, not a template stripe */
@import url("./tokens.css");
@import url("./base.css");

/* quik — profile site layout on top of railway/railway.css. Only layout lives here:
   colours, radii and type come from the Railway tokens, so every colorway recolors the page. */

@keyframes rw-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* Proportional punctuation: Japanese faces set ’ and ・ full-width otherwise. */
body { font-feature-settings: "palt"; }

@keyframes rw-arrive { from { transform: translateY(8px); } to { transform: none; } }

/* ---------- Nav: wordmark at one edge, the stations at the other ---------- */
.qk-nav {
  position: sticky; top: 0; z-index: var(--z-sticky-nav);
  background: var(--keio-paper); border-bottom: 3px solid var(--keio-accent);
}
.qk-nav-in { display: flex; align-items: center; gap: var(--space-lg); min-height: 64px; }
.qk-wordmark {
  display: flex; align-items: center; gap: var(--space-sm); flex: none;
  background: none; border: 0; padding: 0; color: var(--keio-ink); cursor: pointer;
}
.qk-wordmark .station-number { font-size: 0.9rem; }
.qk-wordmark-name { display: flex; flex-direction: column; line-height: 1.05; text-align: left; }
.qk-wordmark-kana { font-size: var(--text-xs); font-weight: 700; color: var(--keio-gray); }
.qk-wordmark-roman { font-size: var(--text-xl); font-weight: 800; }
.qk-stations { margin-left: auto; min-width: 0; }
.qk-stations ol { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--space-2xs); }
.qk-st {
  display: flex; align-items: center; gap: var(--space-xs); height: 61px; padding: 0 var(--space-sm);
  background: none; border: 0; color: var(--keio-ink); cursor: pointer; white-space: nowrap;
  box-shadow: inset 0 0 0 transparent; transition: color var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out);
}
.qk-st-num {
  font-size: var(--text-xs); font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1;
  padding: var(--space-3xs) var(--space-2xs); border: 2px solid var(--keio-accent); border-radius: var(--keio-radius-chip); background: var(--keio-paper);
}
.qk-st-jp { font-size: var(--text-sm); font-weight: 700; }
.qk-st:hover { color: var(--keio-accent-dark); }
.qk-st.is-active { color: var(--keio-accent-dark); box-shadow: inset 0 -4px 0 var(--keio-accent); }
.qk-st.is-active .qk-st-num { background: var(--keio-accent-badge); border-color: var(--keio-accent-badge); color: var(--keio-on-accent); }
.qk-st:focus-visible, .qk-wordmark:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.qk-clock { flex: none; padding: var(--space-2xs) var(--space-sm); border-left-width: 0; border-radius: var(--keio-radius-chip); }
.qk-clock-time { font-weight: 800; font-variant-numeric: tabular-nums; }

/* ---------- Hero (Poster): the station name sign, then the departure board ---------- */
.qk-hero { padding-block: var(--space-xl) 0; }
/* The station sign (railway.css .station-sign) at one size on every page. */
.qk-station .station-sign { animation: rw-arrive 0.6s var(--ease-out) both; }
.qk-station .station-sign-band {
  display: flex; justify-content: space-between; gap: var(--space-lg);
  background: var(--keio-accent-badge); color: var(--keio-on-accent); padding: 0 var(--space-lg);
}
.qk-station .station-sign-band > button {
  display: flex; align-items: center; gap: var(--space-xs); min-height: 48px; padding: 0 var(--space-xs);
  background: none; border: 0; color: inherit; font-weight: 700; font-size: var(--text-md); cursor: pointer;
  border-radius: var(--keio-radius-chip); white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis;
}
.qk-band-en { font-weight: 500; opacity: 0.85; }
/* Sign arrows are drawn, not typed: a solid triangle before prev, after next. */
.qk-band-prev::before, .qk-band-next::after {
  content: ""; width: 9px; height: 12px; flex: none; background: currentColor;
}
.qk-band-prev::before { clip-path: polygon(100% 0, 0 50%, 100% 100%); margin-right: var(--space-2xs); }
.qk-band-next::after { clip-path: polygon(0 0, 100% 50%, 0 100%); margin-left: var(--space-2xs); }
.qk-station .station-sign-band > button:hover { background: color-mix(in oklab, var(--keio-on-accent) 14%, transparent); }
.qk-station .station-sign-band > button:focus-visible { outline: 2px solid var(--keio-on-accent); outline-offset: -4px; }

.qk-hero-row {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-3xl); align-items: center;
  margin-top: var(--space-xl);
}
.qk-hero-text { display: flex; flex-direction: column; gap: var(--space-lg); min-width: 0; }
.qk-hero-entries { display: flex; flex-direction: column; gap: var(--space-xs); min-width: 0; }
.qk-hero-entries .rw-entry-msg { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.qk-entries-empty { color: var(--keio-gray); }
.qk-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.qk-btn { min-height: 48px; padding-inline: var(--space-lg); font-size: var(--text-md); }

/* The departure board: each row is a way out of this station, with what is live there now. */
.qk-board { padding: var(--space-md) var(--space-lg) var(--space-xs); animation: rw-arrive 0.6s var(--ease-out) 0.08s both; }
.qk-board-head { display: flex; align-items: baseline; gap: var(--space-sm); padding-bottom: var(--space-sm); border-bottom: 1px solid var(--keio-board-line); }
.qk-board-title { font-size: var(--text-lg); font-weight: 800; }
.qk-board-sub { font-size: var(--text-sm); opacity: 0.75; }
.qk-departures { list-style: none; margin: 0; padding: 0; }
.qk-departures li + li { border-top: 1px solid var(--keio-board-line); }
.qk-dep {
  display: grid; grid-template-columns: 4.5rem minmax(0, 0.9fr) minmax(0, 1.3fr); align-items: center; gap: var(--space-md);
  width: 100%; min-height: 56px; padding: var(--space-xs) var(--space-xs);
  background: none; border: 0; color: var(--keio-board-ink); text-align: left; cursor: pointer;
  transition: background-color var(--dur-short) var(--ease-out);
}
.qk-dep:hover { background: color-mix(in oklab, var(--keio-board-ink) 7%, transparent); }
.qk-dep:focus-visible { outline: 2px solid var(--keio-caution); outline-offset: -2px; }
.qk-dep-track {
  justify-self: start; font-size: var(--text-xs); font-weight: 800; font-variant-numeric: tabular-nums;
  padding: var(--space-3xs) var(--space-2xs); border: 2px solid var(--keio-accent); border-radius: var(--keio-radius-chip);
}
.qk-dep-for { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.qk-dep-jp { font-size: var(--text-lg); font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qk-dep-en { font-size: var(--text-xs); opacity: 0.7; }
.qk-dep-info { font-size: var(--text-sm); font-family: var(--keio-font-dense); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Home bento: you, today's line, the playlists, the notice ---------- */
.qk-home { padding-block: var(--space-xl) var(--section-gap-s); }
.qk-home .qk-hero-row { margin-top: var(--space-2xl); }
.qk-bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-columns); }
.qk-tile {
  background: var(--keio-paper); border-radius: var(--keio-radius);
  padding: var(--space-xl); display: flex; flex-direction: column; gap: var(--space-md); min-width: 0;
}
.qk-tile-line { grid-column: span 7; }
.qk-tile-covers { grid-column: span 5; }
.qk-tile-label { font-size: var(--text-md); font-weight: 800; max-width: none; color: var(--keio-accent-dark); }
.qk-en { margin-left: var(--space-2xs); }
.rw-label { font-size: var(--text-sm); font-weight: 700; color: var(--keio-gray); max-width: none; line-height: 1.3; }
.qk-me {
  display: flex; align-items: center; gap: var(--space-xl); margin-top: var(--space-xl);
  padding-bottom: var(--space-xl); border-bottom: 1px solid var(--keio-gray-line);
}
.qk-me-avatar { width: 168px; aspect-ratio: 1; flex: none; }
.qk-me-info { display: flex; flex-direction: column; gap: var(--space-md); min-width: 0; }
.qk-me-name { font-size: var(--text-section); font-weight: 800; line-height: 1; }
.qk-me-handle { font-weight: 700; color: var(--keio-accent-dark); margin-top: calc(-1 * var(--space-xs)); }
.qk-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.qk-chips .chip { font-size: var(--text-sm); padding: var(--space-2xs) var(--space-xs); }
.qk-chips .chip b { color: var(--keio-accent-dark); }
.qk-networks { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.qk-line-name { display: flex; align-items: center; gap: var(--space-xs); font-size: var(--text-title); }
.qk-line-op { color: var(--keio-gray); margin-top: calc(-1 * var(--space-sm)); }
.qk-fact { font-family: var(--keio-font-dense); line-height: 1.6; max-width: 48ch; }
.qk-line-actions { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: auto; }
.qk-count { font-variant-numeric: tabular-nums; color: var(--keio-gray); }
.qk-mini-covers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-sm); }
.qk-mini-cover { aspect-ratio: 1; display: block; transition: transform var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out); }
.qk-mini-cover:hover { border-color: var(--keio-accent); transform: translateY(-2px); }
.rw-mask-icon {
  display: inline-block; width: 18px; height: 18px; background: currentColor;
  -webkit-mask: url("lastfm-icon.png") center / contain no-repeat;
  mask: url("lastfm-icon.png") center / contain no-repeat;
}

/* ---------- The other stations ---------- */
.qk-view { padding-block: var(--space-xl) var(--section-gap-s); }
.qk-view-in { display: flex; flex-direction: column; gap: var(--space-xl); }
.qk-station .station-sign-main { padding: var(--space-lg) var(--space-xl); }
.qk-station .station-sign-name { max-width: none; font-size: inherit; display: flex; flex-direction: column; align-items: center; line-height: 1.1; }
.qk-station .station-sign-jp { font-size: var(--text-section); font-variant-numeric: tabular-nums; }
.qk-station .station-sign-en { font-size: var(--text-md); }
.qk-station .station-sign .station-number { font-size: 1.4rem; }
.rw-panel { display: flex; flex-direction: column; gap: var(--space-xl); min-width: 0; animation: rw-arrive 0.4s var(--ease-out) both; }
.rw-section-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); flex-wrap: wrap; }
.rw-section-head h2 { display: flex; align-items: center; gap: var(--space-xs); font-size: var(--text-section); }

/* Tinted imagery: grayscale photo, recoloured by the live line */
.rw-tint { position: relative; overflow: hidden; border-radius: var(--keio-radius); border: 1px solid var(--keio-gray-line); background: var(--keio-accent-tint); }
.rw-tint-img { position: absolute; inset: 0; background: center / cover no-repeat; filter: grayscale(1) contrast(1.05); }
.rw-tint::after { content: ""; position: absolute; inset: 0; background: var(--keio-accent); mix-blend-mode: color; pointer-events: none; }

/* Last.fm */
.rw-who { display: flex; align-items: center; gap: var(--space-sm); }
.rw-who .rw-tint { width: 56px; height: 56px; flex: none; }
.rw-who-name { font-weight: 800; font-size: var(--text-title); line-height: 1.2; }
.rw-who-handle { font-size: var(--text-sm); color: var(--keio-accent-dark); font-weight: 700; }
.rw-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-columns); }
.rw-stat-value { font-size: var(--text-display-s); font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.rw-stat-label { font-size: var(--text-sm); font-weight: 700; opacity: 0.8; }
.rw-charts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-columns); }
.rw-charts .rw-label { margin-bottom: var(--space-xs); }
.rw-charts > div { min-width: 0; }
.rw-chart-row { min-width: 0; overflow: hidden; align-items: center; }
.rw-chart-row .search-result-char { width: 1.3em; flex: none; text-align: center; font-size: 1.05em; font-variant-numeric: tabular-nums; }
.rw-chart-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.rw-chart-name { font-weight: 700; font-size: 0.9em; font-family: var(--keio-font-dense); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rw-chart-meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* AniList */
.rw-stats-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rw-stats-4 .rw-stat-value { font-size: var(--text-section); font-variant-numeric: tabular-nums; }
.rw-panel .rw-label { margin-bottom: var(--space-xs); }
.rw-media-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-md); }
.rw-media { display: flex; flex-direction: column; gap: var(--space-2xs); color: var(--keio-ink); text-decoration: none; min-width: 0; }
.rw-media:hover { color: var(--keio-ink); }
.rw-media-cover { aspect-ratio: 2 / 3; transition: border-color var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out); }
.rw-media:hover .rw-media-cover { border-color: var(--keio-accent); transform: translateY(-2px); }
.rw-media-title {
  font-family: var(--keio-font-dense); font-weight: 700; font-size: 0.82em; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: 2.6em; /* keep progress bars aligned when a title fits on one line */
}
.rw-media-sub { font-size: 0.72em; color: var(--keio-gray); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rw-media-sub:empty { display: none; }
/* Anime/manga covers keep their original colours (no line tint). */
.rw-media-cover::after, .rw-row-thumb::after { display: none; }
.rw-media-cover .rw-tint-img, .rw-row-thumb .rw-tint-img { filter: none; }
.rw-progress { height: 4px; border-radius: 2px; background: var(--keio-gray-line); overflow: hidden; }
.rw-progress-fill { height: 100%; background: var(--keio-accent); }
.rw-row-link { color: var(--keio-ink); text-decoration: none; }
.rw-row-link:hover { color: var(--keio-ink); }
.rw-row-thumb { display: block; flex: none; width: 30px; height: 42px; border-radius: var(--keio-radius-chip); }
.rw-row-end { margin-left: auto; flex: none; }

/* Playlists */
.rw-covers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-columns); }
.rw-cover { display: block; aspect-ratio: 1; transition: border-color var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out); }
.rw-cover:hover { border-color: var(--keio-accent); transform: translateY(-2px); }

/* Guestbook */
.rw-form { display: flex; flex-direction: column; gap: var(--space-md); max-width: 720px; }
.rw-form-actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-md); }
.rw-error { flex: 1; font-size: var(--text-sm); font-weight: 700; color: var(--color-error); }
.rw-entries { display: flex; flex-direction: column; gap: var(--space-xs); }
.rw-entry { flex-direction: column; align-items: stretch; gap: var(--space-2xs); padding: var(--space-sm) var(--space-md); }
.rw-entry-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-sm); }
.rw-entry-name { font-weight: 700; color: var(--keio-accent-dark); }
.rw-entry-sig { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-xs); min-width: 0; }
.rw-entry-line { font-size: 0.72em; }
.rw-entry-date { font-size: var(--text-xs); color: var(--keio-gray); white-space: nowrap; }
.rw-entry-msg { font-family: var(--keio-font-dense); word-break: break-word; }
.rw-empty { text-align: center; color: var(--keio-gray); padding: var(--space-xl) 0; }

/* Settings */
.rw-current-line { display: flex; align-items: center; gap: var(--space-md); flex-wrap: wrap; }
.rw-current-line .station-number { font-size: 1.2em; }
.rw-current-names { display: flex; flex-direction: column; line-height: 1.25; flex: 1; min-width: 12em; }
.rw-current-jp { font-size: var(--text-title); font-weight: 800; }
.rw-current-en { font-size: var(--text-sm); color: var(--keio-gray); font-weight: 600; }
.rw-line-btn.is-active { border-color: var(--keio-accent); background: var(--keio-accent-tint); color: var(--keio-accent-dark); }
.rw-line-code { font-weight: 800; font-size: 0.85em; min-width: 1.6em; }
.rw-hint { font-size: var(--text-sm); color: var(--keio-gray); font-family: var(--keio-font-dense); margin: 0; }
.rw-hint code { white-space: nowrap; font-size: 0.95em; background: var(--keio-accent-tint); color: var(--keio-accent-dark); padding: 0.05em 0.35em; border-radius: var(--keio-radius-chip); }
.rw-op-group { padding: var(--space-2xs) 0 var(--space-xs) var(--space-md); }
.rw-op-label { font-size: var(--text-sm); font-weight: 700; margin: var(--space-2xs) 0; }
.rw-op-group .preset-buttons, .rw-line-results { padding-left: 0; }

/* ---------- Footer: a letter close under the platform announcement ---------- */
.qk-footer { margin-top: auto; }
.rw-ticker { display: flex; align-items: center; gap: var(--space-md); overflow: hidden; border-radius: 0; border-left-width: 0; padding: var(--space-sm) var(--gutter); }
.rw-ticker-label { flex: none; font-size: var(--text-sm); font-weight: 800; opacity: 0.8; }
.rw-ticker-track { flex: 1; overflow: hidden; white-space: nowrap; }
.rw-ticker-run { display: inline-flex; animation: rw-marquee 38s linear infinite; }
.rw-ticker-run span { padding-right: 3em; font-weight: 700; }
.rw-ticker:hover .rw-ticker-run, .rw-ticker:focus-visible .rw-ticker-run, .rw-ticker:focus-within .rw-ticker-run { animation-play-state: paused; }
.rw-ticker:focus-visible { outline: 2px solid var(--keio-caution); outline-offset: -2px; }
.qk-colophon { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-lg); flex-wrap: wrap; padding-block: var(--space-xl) var(--space-2xl); }
.qk-signoff { font-size: var(--text-title); font-weight: 800; max-width: none; }
.rw-site { min-height: 100vh; display: flex; flex-direction: column; }

@media (prefers-reduced-motion: reduce) {
  .rw-ticker-run { animation: none; }
  .qk-station .station-sign, .qk-board, .rw-panel { animation: none; }
}

/* ---------- Tablet and small laptop: stations get their own row ---------- */
@media (max-width: 75rem) {
  .qk-nav-in { flex-wrap: wrap; gap: 0 var(--space-md); padding-top: var(--space-xs); }
  .qk-clock { margin-left: auto; }
  .qk-stations { order: 3; flex-basis: 100%; margin-left: 0; overflow-x: auto; scrollbar-width: none; }
  .qk-stations::-webkit-scrollbar { display: none; }
  .qk-stations ol { justify-content: space-between; }
  .qk-st { height: 48px; padding: 0 var(--space-xs); }
  .qk-tile-line, .qk-tile-covers { grid-column: span 6; }
  .qk-hero-row { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
}

/* ---------- Narrow screens ---------- */
@media (max-width: 60rem) {
  .qk-nav { position: static; }
  .qk-stations ol { justify-content: flex-start; }
  .qk-hero { min-height: 0; padding-block: var(--space-lg) var(--space-xl); }
  .qk-station .station-sign-band > button { font-size: var(--text-sm); }
  .qk-station .station-sign-band .qk-band-en { display: none; }
  .qk-hero-row { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); margin-top: var(--space-lg); }
  .qk-dep { grid-template-columns: 3.6rem minmax(0, 1fr); row-gap: var(--space-3xs); }
  .qk-dep-info { grid-column: 2; }
  .qk-tile { padding: var(--space-lg); }
  .qk-me { gap: var(--space-lg); }
  .qk-me-avatar { width: 140px; }
  .qk-st { padding: 0 6px; }
  .qk-stations ol { gap: 0; }
  .qk-mini-covers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rw-charts { grid-template-columns: minmax(0, 1fr); }
  .rw-covers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rw-stats-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rw-media-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .qk-station .station-sign-jp { font-size: var(--text-2xl); }
}

/* ---------- Phones ---------- */
@media (max-width: 40rem) {
  .qk-tile-line, .qk-tile-covers { grid-column: 1 / -1; }
  .qk-me { flex-direction: column; align-items: flex-start; }
  .qk-me-avatar { width: 128px; }
}