/* Robot Rights Association site styles. */
/* Shared brand tokens and site-specific tokens are kept in one cache-versioned file. */
:root {
  color-scheme: light;
  --rr-navy: #103A5C;
  --rr-blue: #1F5C83;
  --rr-graphite: #647078;
  --rr-mist: #D9DEE1;
  --rr-paper: #F7F6F1;
  --rr-ink: #17232C;
  --rr-protocol-teal: #3F7376;
  --rr-white: #FFFFFF;
  --rr-font-en: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --rr-font-ja: 'Noto Sans CJK JP', 'Hiragino Sans', 'Yu Gothic', YuGothic, Meiryo, ui-sans-serif, system-ui, sans-serif;
  --rr-font-mono: ui-monospace, 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  --rr-radius-sm: 0.25rem;
  --rr-radius-md: 0.5rem;
  --rr-content-readable: 72ch;
  --rr-content-wide: 75rem;
  --site-header-height: 5rem;
  --site-soft-blue: #eaf1f5;
  --site-soft-blue-active: #c8dce7;
  --site-soft-teal: #edf4f3;
  --site-dark-surface: #285875;
  --site-dark-surface-hover: #214b64;
  --site-footer-surface: #244f69;
  --site-footer-border: #527087;
  --site-navy-strong: #0d304d;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--rr-paper);
  color: var(--rr-ink);
  font-family: var(--rr-font-en);
  font-size: 1rem;
  line-height: 1.72;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--rr-navy); text-decoration-thickness: 0.08em; text-underline-offset: 0.18em; }
a:hover { color: var(--rr-blue); }
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--rr-blue);
  outline-offset: 3px;
}
button, input, textarea, select { font: inherit; }
main[tabindex="-1"] { scroll-margin-top: calc(var(--site-header-height) + 1rem); }
main[tabindex="-1"]:focus { outline: none; }
code { font-family: var(--rr-font-mono); overflow-wrap: anywhere; }

.skip-link {
  position: fixed;
  z-index: 1000;
  inset: 0 auto auto 1rem;
  transform: translateY(-130%);
  padding: .65rem .9rem;
  background: var(--rr-navy);
  color: var(--rr-white);
  border-radius: 0 0 var(--rr-radius-md) var(--rr-radius-md);
  font-weight: 700;
}
.skip-link:focus { transform: translateY(0); }

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(247, 246, 241, .96);
  background: color-mix(in srgb, var(--rr-paper) 94%, transparent);
  border-top: 4px solid var(--rr-navy);
  border-bottom: 1px solid var(--rr-mist);
  backdrop-filter: blur(14px);
}
.header-inner {
  width: min(calc(100% - 2rem), var(--rr-content-wide));
  min-height: var(--site-header-height);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(21rem, 23rem) 1fr auto;
  align-items: center;
  gap: 1.5rem;
}
.brand-link {
  display: inline-flex;
  align-items: center;
  gap: .9rem;
  min-width: 0;
  color: var(--rr-ink);
  text-decoration: none;
}
.brand-link .brand-mark {
  width: 5.15rem;
  height: 5.15rem;
  flex: 0 0 5.15rem;
}
.brand-copy {
  display: grid;
  gap: .22rem;
  min-width: 0;
  line-height: 1.08;
}
.brand-name {
  display: block;
  font-size: 1.38rem;
  font-weight: 750;
  letter-spacing: -.018em;
  white-space: nowrap;
}
.brand-tagline {
  display: block;
  color: var(--rr-graphite);
  font-size: .64rem;
  font-weight: 650;
  letter-spacing: .035em;
  white-space: nowrap;
}
.desktop-nav { display: flex; justify-content: flex-end; align-items: center; gap: .15rem; }
.desktop-nav a,
.language-link {
  display: inline-flex;
  align-items: center;
  min-height: 2.6rem;
  padding: .45rem .62rem;
  border-radius: var(--rr-radius-sm);
  color: var(--rr-ink);
  font-size: .88rem;
  font-weight: 650;
  text-decoration: none;
}
.desktop-nav a:hover {
  background: var(--site-soft-blue);
  color: var(--rr-navy);
}
.desktop-nav a[aria-current="page"] {
  background: var(--site-soft-blue-active);
  color: var(--site-navy-strong);
  font-weight: 900;
}
.language-link {
  justify-self: end;
  width: max-content;
  max-width: 100%;
  border: 1px solid var(--rr-mist);
  background: var(--rr-white);
  color: var(--rr-navy);
  white-space: nowrap;
}
.mobile-menu { display: none; }

main { min-height: 60vh; }
.container { width: min(calc(100% - 2rem), var(--rr-content-wide)); margin-inline: auto; }
.reading { max-width: var(--rr-content-readable); }
.breadcrumbs {
  padding-top: 1.35rem;
  color: var(--rr-graphite);
  font-size: .88rem;
}
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.breadcrumbs li + li::before { content: "/"; margin-right: .4rem; color: var(--rr-graphite); }

.hero {
  position: relative;
  padding: clamp(3.5rem, 8vw, 7rem) 0 clamp(3rem, 6vw, 5.5rem);
  overflow: hidden;
}
.hero::after {
  content: "";
  position: absolute;
  width: min(44vw, 34rem);
  aspect-ratio: 1;
  right: max(-12rem, -12vw);
  top: 1rem;
  border: 1px solid var(--rr-mist);
  border-radius: 50%;
  box-shadow: inset 0 0 0 4rem color-mix(in srgb, var(--site-soft-blue) 45%, transparent), inset 0 0 0 8rem color-mix(in srgb, var(--site-soft-teal) 40%, transparent);
  pointer-events: none;
}
.hero-inner { position: relative; z-index: 1; max-width: 60rem; }
.home-hero {
  padding-top: clamp(2.25rem, 4.5vw, 4rem);
}
.eyebrow {
  margin: 0 0 1rem;
  color: var(--rr-blue);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}
h1, h2, h3 { color: var(--rr-ink); line-height: 1.16; text-wrap: balance; }
h1 {
  margin: 0;
  max-width: 17ch;
  font-size: clamp(2.45rem, 6vw, 5.25rem);
  font-weight: 720;
  letter-spacing: -.045em;
}
.page-hero {
  padding-top: clamp(1.6rem, 3.2vw, 2.8rem);
  padding-bottom: clamp(2.7rem, 5vw, 4.4rem);
}
.page-hero h1 { max-width: 20ch; font-size: clamp(2.3rem, 5vw, 4.35rem); }
.page-hero h1.principles-title { max-width: none; }
.lead {
  max-width: 66ch;
  margin: 1.4rem 0 0;
  color: #3d4b55;
  font-size: clamp(1.08rem, 2vw, 1.35rem);
  line-height: 1.64;
}
.actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.8rem; }
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: .68rem 1rem;
  border: 1px solid var(--rr-navy);
  border-radius: var(--rr-radius-md);
  font-weight: 750;
  text-decoration: none;
}
.button-primary { background: var(--site-dark-surface); border-color: var(--site-dark-surface); color: var(--rr-white); }
.button-primary:hover { background: var(--site-dark-surface-hover); border-color: var(--site-dark-surface-hover); color: var(--rr-white); }
.button-secondary { background: transparent; color: var(--rr-navy); }
.button-secondary:hover { background: var(--site-soft-blue); }
.text-link { font-weight: 750; }
.text-link::after { content: " →"; }

.section { padding: clamp(3.25rem, 7vw, 6rem) 0; border-top: 1px solid var(--rr-mist); }
.section-soft { background: var(--rr-white); }
.section-navy { background: var(--site-dark-surface); color: var(--rr-white); border-top: 0; }
.section-navy h2, .section-navy h3, .section-navy a { color: var(--rr-white); }
.section-navy .eyebrow { color: #c9e2ee; }
.section-navy .button-secondary { border-color: var(--rr-white); color: var(--rr-white); }
.section-navy .button-secondary:hover { background: rgba(255,255,255,.1); color: var(--rr-white); }
.section-navy p { color: #e6edf2; }
.section-heading { max-width: 54rem; margin-bottom: 2rem; }
.section-heading h2, .content-section h2 {
  margin: 0 0 .9rem;
  font-size: clamp(1.75rem, 3vw, 2.65rem);
  letter-spacing: -.025em;
}
.section-heading p { margin: 0; color: #52606a; font-size: 1.08rem; }
.content-section { padding: 2.4rem 0; border-top: 1px solid var(--rr-mist); }
.content-section:first-child { border-top: 0; padding-top: 0; }
.content-section p { max-width: var(--rr-content-readable); }
.content-section h3 { margin-top: 1.8rem; font-size: 1.25rem; }
.content-section-wide-copy p { max-width: none; }

.grid { display: grid; gap: 1rem; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.home-association-grid {
  grid-template-columns: minmax(0, 1.2fr) minmax(18rem, .8fr);
  align-items: start;
  column-gap: clamp(1.5rem, 4vw, 3.25rem);
}
.card {
  background: var(--rr-white);
  border: 1px solid var(--rr-mist);
  border-radius: var(--rr-radius-md);
  padding: 1.35rem;
}
.card h2,
.card h3 { margin: 0 0 .55rem; color: var(--rr-navy); font-size: 1.16rem; letter-spacing: normal; }
.card p { margin: 0; color: #4b5963; }
.number-card { position: relative; padding-top: 3.25rem; }
.number-card::before {
  content: attr(data-number);
  position: absolute;
  top: 1.1rem;
  left: 1.35rem;
  color: var(--rr-blue);
  font-family: var(--rr-font-mono);
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .08em;
}

.position-note,
.protocol-note {
  border-left: 4px solid var(--rr-blue);
  background: var(--site-soft-blue);
  padding: 1.15rem 1.25rem;
}
.protocol-note { border-left-color: var(--rr-protocol-teal); background: var(--site-soft-teal); }
.position-note p, .protocol-note p { margin: 0; }

.status-panel {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .85rem;
  padding: 1.1rem;
  background: var(--rr-white);
  border: 1px solid var(--rr-mist);
  border-radius: var(--rr-radius-md);
}
.status-item dt { color: var(--rr-graphite); font-size: .76rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.status-item dd { margin: .18rem 0 0; color: var(--rr-ink); font-weight: 750; }
.status-active { color: var(--rr-protocol-teal); }

.section-navy .status-panel {
  background: rgba(247, 246, 241, .10);
  border-color: rgba(255, 255, 255, .26);
}
.section-navy .status-item dt { color: #c9dbe5; }
.section-navy .status-item dd { color: var(--rr-white); }
.section-navy .status-item .status-active { color: #d8eee9; }

.fact-list { margin: 0; border-top: 1px solid var(--rr-mist); }
.fact-list > div { display: grid; grid-template-columns: minmax(10rem, .55fr) 1fr; gap: 1rem; padding: .85rem 0; border-bottom: 1px solid var(--rr-mist); }
.fact-list dt { color: var(--rr-graphite); font-weight: 700; }
.fact-list dd { margin: 0; font-weight: 650; }

.link-list { display: grid; gap: .75rem; margin: 0; padding: 0; list-style: none; }
.link-panel {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: start;
  padding: 1rem 0;
  border-bottom: 1px solid var(--rr-mist);
}
.link-panel:first-child { border-top: 1px solid var(--rr-mist); }
.link-panel a { font-weight: 750; }
.link-panel p { margin: .25rem 0 0; color: #52606a; }
.external-label { color: var(--rr-graphite); font-family: var(--rr-font-mono); font-size: .78rem; white-space: nowrap; }

.page-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(13rem, 16rem);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
  padding-bottom: clamp(4rem, 8vw, 7rem);
}
.page-layout > .reading {
  width: 100%;
  max-width: none;
  min-width: 0;
}
.page-layout-wide { grid-template-columns: minmax(0, 1fr); }
.page-layout-wide .content-section { width: 100%; }
.page-aside { position: sticky; top: calc(var(--site-header-height) + 1.5rem); }
.aside-card { border-top: 3px solid var(--rr-navy); background: var(--rr-white); padding: 1.1rem; }
.aside-card h2 { margin: 0 0 .65rem; font-size: 1rem; }
.aside-card ul { margin: 0; padding-left: 1.1rem; }
.aside-card li + li { margin-top: .35rem; }

.site-footer { background: var(--site-footer-surface); color: #e2e9ed; }
.footer-main {
  width: min(calc(100% - 2rem), var(--rr-content-wide));
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1.3fr .9fr .9fr;
  gap: 2rem;
  padding: 3.5rem 0 2.5rem;
}
.footer-brand { display: grid; grid-template-columns: 3.6rem 1fr; gap: 1rem; align-items: start; align-content: start; }
.footer-brand img {
  display: block;
  width: 3.6rem;
  height: 3.6rem;
  margin-top: 0;
  object-fit: contain;
}
.footer-brand strong { color: var(--rr-white); }
.footer-brand p { margin: .45rem 0 0; max-width: 37rem; color: #d0dbe1; }
.footer-column h2 { margin: 0 0 .75rem; color: var(--rr-white); font-size: .95rem; }
.footer-column ul { margin: 0; padding: 0; list-style: none; }
.footer-column li + li { margin-top: .42rem; }
.site-footer a { color: #e6f1f6; }
.footer-bottom { border-top: 1px solid var(--site-footer-border); }
.footer-bottom-inner {
  width: min(calc(100% - 2rem), var(--rr-content-wide));
  margin-inline: auto;
  display: flex;
  justify-content: flex-start;
  gap: 1rem;
  padding: 1rem 0 1.4rem;
  color: #c1cdd5;
  font-size: .85rem;
}

.not-found { padding: clamp(4rem, 10vw, 8rem) 0; }
.not-found .language-recovery { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--rr-mist); }


html[lang="ja"] body { font-family: var(--rr-font-ja); }
html[lang="ja"] h1,
html[lang="ja"] h2,
html[lang="ja"] h3 { letter-spacing: -.015em; }
html[lang="ja"] .eyebrow { letter-spacing: .08em; }
html[lang="ja"] .brand-name { font-size: 1.34rem; letter-spacing: -.02em; }
html[lang="ja"] .brand-tagline { font-size: .66rem; letter-spacing: .07em; }
html[lang="ja"] .desktop-nav a {
  flex: 0 0 auto;
  padding-inline: .42rem;
  font-size: .80rem;
  white-space: nowrap;
}
@media (max-width: 75rem) {
  .desktop-nav { display: none; }
  .mobile-menu { display: block; position: relative; }
  .mobile-menu summary {
    cursor: pointer;
    white-space: nowrap;
    list-style: none;
    border: 1px solid var(--rr-mist);
    border-radius: var(--rr-radius-sm);
    background: var(--rr-white);
    padding: .5rem .65rem;
    color: var(--rr-navy);
    font-weight: 750;
  }
  .mobile-menu summary::-webkit-details-marker { display: none; }
  .mobile-menu nav {
    position: absolute;
    right: 0;
    top: calc(100% + .55rem);
    width: min(22rem, calc(100vw - 2rem));
    padding: .6rem;
    background: var(--rr-white);
    border: 1px solid var(--rr-mist);
    border-radius: var(--rr-radius-md);
  }
  .mobile-menu nav a {
    display: block;
    padding: .65rem .7rem;
    color: var(--rr-ink);
    font-weight: 650;
    text-decoration: none;
  }
  .mobile-menu nav a[aria-current="page"] {
    background: var(--site-soft-blue-active);
    color: var(--rr-navy);
    font-weight: 900;
  }
  .header-inner {
    grid-template-columns: minmax(17rem, 1fr) auto auto;
    gap: .7rem;
  }
  .brand-link .brand-mark {
    width: 4.5rem;
    height: 4.5rem;
    flex-basis: 4.5rem;
  }
  .brand-name { font-size: 1.18rem; }
  .brand-tagline { font-size: .56rem; }
  html[lang="ja"] .brand-name { font-size: 1.16rem; }
  html[lang="ja"] .brand-tagline { font-size: .57rem; }
}

@media (max-width: 58rem) {
  .header-inner {
    grid-template-columns: minmax(16rem, 1fr) auto auto;
  }
  .page-layout { grid-template-columns: 1fr; }
  .page-aside { position: static; }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-main { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 42rem) {
  :root { --site-header-height: 4.4rem; }
  .header-inner {
    width: min(calc(100% - 1.25rem), var(--rr-content-wide));
    min-height: var(--site-header-height);
    grid-template-columns: minmax(11.5rem, 1fr) auto auto;
  }
  .brand-link { gap: .55rem; }
  .brand-link .brand-mark {
    width: 3.5rem;
    height: 3.5rem;
    flex-basis: 3.5rem;
  }
  .brand-name,
  html[lang="ja"] .brand-name { font-size: .98rem; }
  .brand-tagline,
  html[lang="ja"] .brand-tagline { display: none; }
  html[lang="ja"] .language-link { font-size: .78rem; }
  .language-link { min-height: 2.3rem; padding: .35rem .5rem; font-size: .82rem; }
  .container, .footer-main, .footer-bottom-inner { width: min(calc(100% - 1.35rem), var(--rr-content-wide)); }
  .hero::after { opacity: .45; }
  .grid-2, .grid-3, .status-panel { grid-template-columns: 1fr; }
  .fact-list > div { grid-template-columns: 1fr; gap: .2rem; }
  .footer-main { grid-template-columns: 1fr; }
  .footer-brand { grid-column: auto; }
  .footer-bottom-inner { flex-direction: column; }
  .link-panel { display: block; }
  .external-label { display: block; margin-top: .4rem; }
}

@media (max-width: 36rem) {
  .header-inner {
    grid-template-columns: minmax(9rem, 1fr) auto auto;
    gap: .4rem;
  }
  .brand-link { gap: .45rem; }
  .brand-link .brand-mark {
    width: 3rem;
    height: 3rem;
    flex-basis: 3rem;
  }
  .brand-name,
  html[lang="ja"] .brand-name { font-size: .88rem; }
  .language-link,
  html[lang="ja"] .language-link {
    min-height: 2.15rem;
    padding: .3rem .4rem;
    font-size: .74rem;
  }
  .mobile-menu summary {
    padding: .42rem .5rem;
    font-size: .82rem;
  }
}

@media (min-width: 58.01rem) {
  .page-hero h1.about-title,
  .page-hero h1.principles-title {
    max-width: none;
    white-space: nowrap;
    font-size: clamp(2.25rem, 4.2vw, 3.9rem);
  }
}

/* Keep the requested Japanese homepage headline as two intentional lines on larger screens. */
html[lang="ja"] .home-hero h1 { max-width: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

@media print {
  .site-header, .site-footer, .skip-link, .actions, .page-aside { display: none !important; }
  body { background: #fff; color: #000; }
  a { color: #000; text-decoration: underline; }
  .section { break-inside: avoid; }
}