/* Shared Rikka wallpaper is selected in the theme, with a portrait mobile asset. */
html body { background-color: oklch(95% 0 0); }
#web_bg { inset: 0; }
/* Let the wallpaper remain visible behind the existing page header and footer. */
#page-header:not(.not-top-img) { background-color: transparent; }

/* About pages keep all styling within their own surface. */
body:has(.rikka-about) {
  --rikka-ink: var(--rk-ink);
  --rikka-muted: var(--rk-muted);
  --rikka-accent: var(--rk-accent);
  --rikka-paper: var(--rk-surface);
  --rikka-line: var(--rk-line);
  margin: 0;
  padding: 0;
}
body:has(.rikka-about) #body-wrap { width: 100%; }
body:has(.rikka-about) #content-inner { max-width: 1200px; padding: 0 32px 40px; }
body:has(.rikka-about) #page {
  background: transparent !important;
  box-shadow: none !important;
  border: 0;
  padding: 0;
}
body:has(.rikka-about) .page-title { display: none; }
body:has(.rikka-about) #page-header { background: transparent; }
body:has(.rikka-about) #nav { background: var(--rk-surface); }
body:has(.rikka-about) #nav a,
body:has(.rikka-about) #nav .site-page { color: var(--rikka-ink); text-shadow: none; }
#article-container .rikka-about {
  color: var(--rikka-ink);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 16px;
  line-height: 1.85;
  overflow-wrap: anywhere;
}
#article-container .rikka-about h1,
#article-container .rikka-about h2,
#article-container .rikka-about h3 { color: var(--rikka-ink); padding: 0; text-wrap: balance; }
#article-container .rikka-about h2::before,
#article-container .rikka-about h3::before { display: none; }
#article-container .rikka-about a { color: var(--rikka-accent); text-decoration: none; }
#article-container .rikka-about a:hover { text-decoration: underline; }
#article-container .rikka-about :is(a,summary):focus-visible { outline: 3px solid var(--rk-accent); outline-offset: 5px; border-radius: 4px; }
.rikka-intro {
  min-height: min(740px, calc(100svh - 60px));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  width: 49%;
  padding: 64px 0;
}
#article-container .rikka-greeting { color: var(--rk-muted); margin: 0 0 20px; font-weight: 600; }
#article-container .rikka-intro h1 { font-size: clamp(32px, 3.5vw, 50px); line-height: 1.4; margin: 0 0 24px; letter-spacing: -.02em; }
#article-container .rikka-intro p { margin: 0 0 20px; }
#article-container .rikka-motto { color: var(--rk-accent); font-weight: 600; }
.rikka-links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
#article-container .rikka-links a { display: inline-flex; gap: 20px; align-items: center; min-height: 48px; padding: 8px 20px; background: #fff; border: 1px solid var(--rk-line); border-radius: 8px; }
#article-container .rikka-links a:first-child { background: var(--rk-accent); color: #fff; border-color: var(--rk-accent); }
.rikka-links a { transition: transform .2s ease-out; }
.rikka-links a:hover { transform: translateY(-2px); }
.rikka-paper { background: var(--rikka-paper); border-radius: 16px; padding: clamp(24px, 5vw, 64px); }
.rikka-section { padding: 0 0 40px; margin: 0 0 40px; border-bottom: 1px solid var(--rikka-line); scroll-margin-top: 88px; }
.rikka-section:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
#article-container .rikka-paper h2 { font-size: clamp(23px, 2.5vw, 30px); line-height: 1.5; margin: 0 0 20px; }
#article-container .rikka-paper p { max-width: 70ch; margin: 0 0 16px; }
.rikka-topics { display: flex; flex-wrap: wrap; gap: 8px 18px; color: var(--rikka-accent); margin-top: 24px; }
.rikka-topics span::before { content: '✦'; margin-right: 8px; color: var(--rk-gold); }
.rikka-skills { margin: 0; }
.rikka-skills > div { display: grid; grid-template-columns: 120px 1fr; gap: 20px; padding: 14px 0; }
.rikka-skills dt { font-weight: 600; }
.rikka-skills dd { margin: 0; color: var(--rikka-muted); }
.rikka-destinations { display: flex; flex-direction: column; }
#article-container .rikka-destinations a { display: grid; grid-template-columns: 150px 1fr auto; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--rikka-line); align-items: center; }
.rikka-destinations a:last-child { border-bottom: 0 !important; }
.rikka-destinations span { color: var(--rikka-muted); }
#article-container .rikka-memories { padding-left: 24px; margin: 0; }
.rikka-memories li { padding: 0 0 16px 12px; }
.rikka-memories li::marker { color: var(--rikka-accent); }
#article-container .rikka-memories h3 { font-size: 18px; margin: 0 0 6px; }
.rikka-contact summary { color: var(--rikka-accent); cursor: pointer; padding: 12px 0; min-height: 44px; }
#article-container .rikka-contact img { width: 220px; max-width: 100%; height: auto; margin: 16px 0; }
#article-container .rikka-signoff { text-align: center; background: var(--rikka-paper); color: var(--rikka-muted); border-radius: 8px; padding: 12px; margin: 24px 0 0; }
.rikka-subpage { padding-top: 64px; min-height: 70svh; }
.rikka-subpage .rikka-paper { max-width: 820px; }
#article-container .rikka-subpage h2 { margin-top: 24px; }
[data-theme="dark"] body:has(.rikka-about) {
  --rikka-ink: var(--rk-ink);
  --rikka-muted: var(--rk-muted);
  --rikka-accent: var(--rk-accent);
  --rikka-paper: var(--rk-surface);
  --rikka-line: var(--rk-line);
}
[data-theme="dark"] body:has(.rikka-about) #nav { background: var(--rk-surface); }
[data-theme="dark"] .rikka-intro { text-shadow: 0 1px 4px oklch(16% 0 0); }
[data-theme="dark"] #article-container .rikka-intro :is(.rikka-greeting,.rikka-motto) { color: var(--rk-ink); }
[data-theme="dark"] #article-container .rikka-links a { background: var(--rk-surface); color: var(--rk-ink); text-shadow: none; }
@media (max-width: 800px) {
  body:has(.rikka-about) #content-inner { padding: 0 16px 28px; }
  .rikka-intro { width: 100%; min-height: 780px; min-height: calc(100svh - 60px); justify-content: flex-start; padding: 36px 8px 240px; }
  #article-container .rikka-intro h1 { font-size: clamp(28px, 7vw, 38px); margin-bottom: 16px; }
  #article-container .rikka-intro p { font-size: 14px; margin-bottom: 12px; max-width: 34ch; }
  .rikka-links { gap: 8px; }
  #article-container .rikka-links a { padding: 8px 12px; gap: 12px; font-size: 14px; }
  .rikka-paper { padding: 28px 22px; border-radius: 12px; }
  .rikka-section { padding-bottom: 28px; margin-bottom: 28px; }
  .rikka-skills > div { grid-template-columns: 1fr; gap: 4px; }
  #article-container .rikka-destinations a { grid-template-columns: 1fr auto; gap: 4px; }
  .rikka-destinations span { grid-column: 1; font-size: 14px; }
  .rikka-destinations b { grid-column: 2; grid-row: 1 / 3; }
  .rikka-subpage { padding-top: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .rikka-links a { transition: none; }
  .rikka-links a:hover { transform: none; }
}

#article-container .rikka-memories li { display: flex; align-items: flex-start; gap: 24px; padding: 0 0 24px; }
#article-container .rikka-memories { list-style: none; padding-left: 0; }
#article-container .rikka-memories img { width: 160px; height: 110px; object-fit: cover; margin: 0; border-radius: 8px; }
.rikka-memories li > a { flex: 0 0 160px; }
@media (max-width: 600px) {
  #article-container .rikka-memories li { gap: 14px; }
  #article-container .rikka-memories img { width: 88px; height: 88px; }
  .rikka-memories li > a { flex-basis: 88px; }
  #article-container .rikka-memories h3 { font-size: 16px; }
}
#rikka-story { scroll-margin-top: 80px; }
@media (max-width: 800px) {
  .rikka-intro { padding-top: 24px; }
  #article-container .rikka-intro h1 { font-size: clamp(28px, 7vw, 34px); line-height: 1.3; }
  #article-container .rikka-intro p { line-height: 1.7; }
}