/* Site styles on top of Bulma 1.0.4 (public/css/bulma.min.css). Keep this short. */

:root {
  --tile: 220px;
  /* Accent: the teal of the UDA logo (mauve #BB76A4, teal #5CBEC1, sand #F8CA79), darkened for text. Bulma derives every link colour from these three. */
  --bulma-link-h: 182deg; --bulma-link-s: 50%; --bulma-link-l: 32%;
  --bulma-link-on-scheme-l: 30%;  /* Bulma colours link text with this, not link-l; keep it as dark as the accent */
  --accent: hsl(182deg, 50%, 32%);
  --accent-soft: hsl(182deg, 45%, 78%);
  --ink: #212020;
}

html { line-break: strict; }
body {
  font-family: system-ui, -apple-system, "Hiragino Sans", "Hiragino Kaku Gothic ProN",
               "Noto Sans JP", "Yu Gothic", sans-serif;
}

/* Hero: a light band under the nav (the site has no header photography). Home gets a tall band with the
   site title and tagline; inner pages a narrow one with a kicker (the page name in the other language) over
   the page name as h1. The theme is pinned to light in layout.html (data-theme="light") so Bulma never
   switches to its dark palette with the OS. */
body { background: #fff; color: var(--ink); }
.hero-header { background: #f3f4f4; border-bottom: 1px solid #e6e8e8; color: var(--ink); }
.hero-branding { padding: 2rem 1.5rem; }
.page-home .hero-branding { padding: 4rem 1.5rem 3.5rem; }
.site-title {
  margin: 0; line-height: 1.15;
  font-size: clamp(1.7rem, 4vw, 2.9rem); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  font-feature-settings: "palt"; color: var(--ink);
}
.site-title a { color: var(--ink); }
.site-title a:hover { color: var(--accent); }
.site-description { margin: 0.6rem 0 0; color: #555; font-size: 1.05rem; letter-spacing: 0.04em; }
.page-inner .site-title.page-name { font-size: clamp(1.4rem, 2.5vw, 2rem); text-transform: none; letter-spacing: 0.04em; font-weight: 700; }
.hero-kicker { margin: 0 0 0.2rem; color: #6b6b6b; font-size: 0.85rem; letter-spacing: 0.1em; }
html[lang="ja"] .site-title, html[lang="ja"] .page-inner .site-title.page-name { text-transform: none; letter-spacing: 0.08em; }
/* Section colours: a stripe along the top of the hero band plus a pale wash of the same colour across the band.
   The three logo colours cycle in nav order: About mauve, Member list teal, Reference sand, Register mauve, News teal, Contact sand;
   home carries all three (thicker stripe, faint three-colour wash). The body carries section-<slug>; posts
   count as News. */
.hero-header::before { content: ""; display: block; height: 6px; background: var(--section, #d8dada); }
.hero-header { background: var(--wash, #f3f4f4); }
.page-home .hero-header::before { height: 10px; }
.page-home { --section: linear-gradient(to right, #bb76a4 0 33.34%, #5cbec1 33.34% 66.67%, #f8ca79 66.67% 100%);
             --wash: linear-gradient(to right, color-mix(in srgb, #bb76a4 14%, #f6f6f6), color-mix(in srgb, #5cbec1 14%, #f6f6f6), color-mix(in srgb, #f8ca79 18%, #f6f6f6)); }
.section-about, .section-register { --section: #bb76a4; --wash: color-mix(in srgb, #bb76a4 14%, #f6f6f6); }
.section-members, .section-news { --section: #5cbec1; --wash: color-mix(in srgb, #5cbec1 16%, #f6f6f6); }
.section-reference, .section-contact { --section: #f8ca79; --wash: color-mix(in srgb, #f8ca79 22%, #f6f6f6); }

/* Nav: plain single-language labels; the current page keeps Bulma's hover background permanently and
   takes the accent colour. No weight change, so neighbouring items never shift between pages. */
.navbar { --bulma-navbar-dropdown-arrow: #4a4a4a; }
.navbar-item.brand img { height: 40px; width: auto; max-height: none; }
.navbar-item.brand .brand-text { margin-left: 0.75rem; font-size: 1.35rem; font-weight: 500; letter-spacing: 0.3em; color: var(--ink); line-height: 1; white-space: nowrap; }
.navbar-item.brand:hover .brand-text { color: var(--accent); }
.navbar-item[aria-current="page"] {
  --bulma-navbar-item-background-l-delta: var(--bulma-navbar-item-hover-background-l-delta);
  --bulma-navbar-item-background-a: 1;
  color: var(--accent);
}
.navbar-item.lang-switch { color: #555; }
.navbar-item.lang-switch::before { content: "\1F310\00a0"; font-size: 0.9em; }
@media (min-width: 1024px) {
  .navbar-item { padding-left: 1.1rem; padding-right: 1.1rem; font-size: 0.95rem; white-space: nowrap; }
  .navbar-start > .navbar-item { padding-left: 0.85rem; padding-right: 0.85rem; }
  .navbar-item.brand { padding-left: 0; font-size: 1rem; }
  .navbar-item.lang-switch { border-left: 1px solid #e5e5e5; margin-left: 0.5rem; }
}
@media (min-width: 1024px) and (max-width: 1215px) {
  /* Six Japanese labels + the lockup + the language switch must fit Bulma's 1024px desktop breakpoint */
  .navbar-item.brand img { height: 32px; }
  .navbar-item.brand .brand-text { font-size: 1.15rem; letter-spacing: 0.25em; }
  .navbar-start > .navbar-item { padding-left: 0.7rem; padding-right: 0.7rem; font-size: 0.9rem; }
  .navbar-item.lang-switch { padding-left: 0.75rem; padding-right: 0.5rem; margin-left: 0.25rem; }
}
@media (min-width: 1216px) {
  .navbar-start > .navbar-item { padding-left: 0.9rem; padding-right: 0.9rem; }
  .navbar-item.brand img { height: 36px; }
}
@media (max-width: 1023px) {
  .navbar-menu .navbar-item { padding-top: 0.6rem; padding-bottom: 0.6rem; }
  .navbar-item.brand img { height: 34px; }
  .navbar-item.brand .brand-text { font-size: 1.2rem; }
}

/* Headings: one scale for the whole site. h2 = section with a cedar left bar, h3 = sub-section with a thinner bar of the same colour. */
.content h2, .content h3, .section-heading h2, .content h1.title { font-feature-settings: "palt"; }
.content h2:not(.page-lead), .section-heading h2 {
  font-size: 1.6rem; font-weight: 700; color: #1f1f1f; line-height: 1.3;
  margin: 2.75rem 0 1.1rem; padding-left: 0.8rem; border-left: 5px solid var(--accent);
}
.content h2:not(.page-lead):first-child { margin-top: 0; }
.content h3 {
  font-size: 1.25rem; font-weight: 700; color: #1f1f1f; line-height: 1.4;
  margin: 2.25rem 0 0.75rem; padding-left: 0.7rem; border-left: 3px solid var(--accent);
}
.content h2.page-lead { font-size: 1.45rem; font-weight: 600; color: #1f1f1f; margin: 0 0 1.25rem; padding: 0; border: 0; }
.content .post-meta + h3, .content h2 + h3 { margin-top: 1.25rem; }
.content .media + h2 { margin-top: 3.25rem; }
.content .media + h3 { margin-top: 2.75rem; }

/* Page column: one centred 64rem column for everything below the hero. Running text inside it is capped
   at 44rem (about 44 Japanese characters a line); photos, media rows, card grids and lists use the full column. */
main.container, .hero-branding .container, .footer .container {
  max-width: 64rem !important;  /* !important: Bulma's :not() container rules outrank these selectors */
}
.navbar > .container { max-width: 76rem !important; }  /* the lockup + six Japanese labels + the switch need more room */
.content { line-height: 1.9; }
.content > p, .content > h1, .content > h2, .content > h3, .content > ul, .content > ol, .content > address,
.content > .post-nav { max-width: 44rem; }
address { font-style: normal; }
.content address { margin-bottom: 1.5rem; }
.content ul.plain { list-style: none; margin-left: 0; }
.content ul.plain li + li { margin-top: 0.35rem; }
.content dl.timeline { display: grid; grid-template-columns: max-content 1fr; column-gap: 1.25rem; row-gap: 0.35rem; margin-bottom: 1.5rem; }
.content dl.timeline dt { font-weight: 500; color: #555; white-space: nowrap; }
.content dl.timeline dd { margin: 0; }
@media (max-width: 480px) {
  .content dl.timeline { grid-template-columns: 1fr; row-gap: 0; }
  .content dl.timeline dd { margin-bottom: 0.6rem; }
}
.content h1.title { margin-bottom: 1.5rem; }
.content .tile img { display: block; max-width: 100%; height: auto; }
.content figure.is-photo { margin: 2rem 0; }
.content figure.is-photo:not(.is-left) img { max-height: 75vh; width: auto; max-width: 100%; }
/* Photo + text side by side (Works items, Business); stacked on phones */
.content .media { display: flex; gap: 1.5rem; align-items: flex-start; margin: 1rem 0 2rem; }
.content .media figure.is-photo { flex: 0 0 min(440px, 45%); margin: 0; }
.content .media figure.is-photo img { max-height: none; width: 100%; }
.content .media-text { flex: 1 1 auto; min-width: 0; }
.content .media-text p:last-child { margin-bottom: 0; }
@media (max-width: 600px) {
  .content .media { flex-direction: column; gap: 1rem; }
  .content .media figure.is-photo { flex-basis: auto; width: 100%; }
}
.content figure.is-photo .tile { display: inline-block; max-width: 100%; }
.content figure.is-photo figcaption { text-align: left; margin-top: 0.6rem; font-size: 0.9rem; color: #444; }
.content figure.is-photo figcaption strong { display: block; color: #222; font-size: 1rem; margin-bottom: 0.2rem; }
.content figure.is-banner { margin: 1.5rem 0; }
.content figure.is-banner img { display: inline-block; height: auto; }
.content .map { position: relative; width: 100%; max-width: 44rem; aspect-ratio: 4 / 3; margin: 1.5rem 0; }
.content .map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.content .lead { font-size: 1.1rem; }
.content .post-meta { color: #777; font-size: 0.85rem; margin: 0 0 1.5rem; }
.content .post-nav { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap;
  margin-top: 3rem; padding-top: 1rem; border-top: 1px solid #e5e5e5; font-size: 0.9rem; }
.content .post-nav .siblings { display: flex; gap: 1.5rem; }
.content .post-nav .siblings span:empty { display: none; }

/* Collection cards (Works index, Blog index, home page): open layout, photo + date + title + 2-line excerpt */
.cards {
  list-style: none !important; margin: 0 0 2rem !important; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1.75rem 1.25rem;
}
.cards li { margin: 0 !important; }
.cards a { display: block; color: inherit; }
.cards .card-pic { display: block; overflow: hidden; border-radius: 6px; background: #eee; aspect-ratio: 1 / 1; }
.cards img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s ease; }
.cards a:hover img, .cards a:focus-visible img { transform: scale(1.03); }
.cards a:hover .card-title, .cards a:focus-visible .card-title { color: var(--accent); }
.cards time { display: block; margin: 0.65rem 0 0.1rem; font-size: 0.8rem; letter-spacing: 0.04em; color: #666; }
.cards .card-title { display: block; margin: 0.55rem 0 0.25rem; font-size: 1rem; font-weight: 600; line-height: 1.4; transition: color 0.2s; }
.cards time + .card-title { margin-top: 0; }
.cards .card-excerpt {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin: 0; font-size: 0.8rem; color: #666; line-height: 1.55;
}
/* Works: a two-column portfolio grid with 3:2 photos and larger titles */
.cards.is-wide { grid-template-columns: repeat(2, 1fr); gap: 2.25rem 1.75rem; }
.cards.is-wide .card-pic { aspect-ratio: 3 / 2; border-radius: 6px; }
.cards.is-wide .card-title { font-size: 1.2rem; margin-top: 0.75rem; }
.cards.is-wide .card-excerpt { font-size: 0.875rem; }
@media (max-width: 600px) { .cards.is-wide { grid-template-columns: 1fr; } }
/* Post without a photo: a blank tile in the page's section colour with the same stripe as the hero band */
.cards .card-pic.is-blank { background: var(--wash, #f3f4f4); }
.cards .card-pic.is-blank::before { content: ""; display: block; height: 6px; background: var(--section, #d8dada); }
@media (prefers-reduced-motion: reduce) { .cards img { transition: none; } .cards a:hover img { transform: none; } }

.section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin: 2.5rem 0 1rem; }
.section-heading h2 { margin: 0; }
.section-heading .more { font-size: 0.85rem; white-space: nowrap; }
.section-heading + .cards { margin-top: 0.5rem !important; }

.content .lead { font-size: 1.1rem; max-width: 44rem; }
.content .home-links { margin-top: 1.5rem; justify-content: center; }
.content .home-links .button { border-color: #cfcfcf; color: #333; }
.content .home-links .button:hover { border-color: var(--accent); color: var(--accent); }
.content figure { margin: 2rem 0; }
.content figcaption { font-size: 0.85rem; color: #666; line-height: 1.6; }
.content figcaption small { display: block; color: #888; }

/* Data tables (members, founders, universities) generated from src/data/*.csv */
.content .table-container { max-width: none; margin: 1rem 0 2.5rem; }
.content table.table { font-size: 0.92rem; }
.content table.table th { white-space: nowrap; font-weight: 600; color: #333; border-bottom: 2px solid var(--accent-soft); }
.content table.table td { vertical-align: top; }
.content table.data-members td:first-child, .content table.data-founders td:nth-child(2) { white-space: nowrap; font-weight: 500; }
.content table.data-founders td:first-child { white-space: nowrap; color: #666; }
.content table.data-universities td:first-child { white-space: nowrap; }
.content .table-note { font-size: 0.85rem; color: #666; }
/* Phones: one block per person (or university) instead of three squeezed columns */
@media (max-width: 599px) {
  .content .table-container { overflow: visible; }
  .content table.table, .content table.table tbody, .content table.table tr, .content table.table td { display: block; width: 100%; }
  .content table.table thead { display: none; }
  .content table.table tr { padding: 0.6rem 0; border-bottom: 1px solid #e5e5e5; }
  .content table.table td { padding: 0.1rem 0; border: 0; white-space: normal !important; }
  .content table.table.is-striped tbody tr:not(.is-selected):nth-child(even) { background: transparent; }
  .content table.data-members td:first-child, .content table.data-founders td:nth-child(2),
  .content table.data-universities td:first-child { font-weight: 600; }
  .content table.data-founders td:first-child { font-size: 0.8rem; color: #666; }
  .content table.data-members td:last-child, .content table.data-founders td:last-child { color: #666; font-size: 0.9rem; }
}

/* Speaker portraits (symposium posts): a row of small photos with the name underneath */
.content ul.portraits { list-style: none; margin: 0.5rem 0 1.75rem; padding: 0; display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; }
.content ul.portraits li { margin: 0; }
.content ul.portraits figure.is-photo { margin: 0; }
.content ul.portraits figure.is-photo img { height: 150px; width: auto; max-width: none; border-radius: 4px; }
.content ul.portraits figcaption { font-size: 0.8rem; margin-top: 0.35rem; }
.content h4 { font-size: 1rem; font-weight: 700; margin: 1.5rem 0 0.4rem; color: #333; }

/* Call to action (Register): centred in the text column */
.content > p.cta { text-align: center; margin: 1.5rem 0 2rem; max-width: none; }  /* full page column, not the 44rem text column */

/* Members page: jump links under the hero; "last updated" note */
.content .jump-links { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 0.75rem; }
.content .jump-links a {
  display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.4rem 0.9rem; border-radius: 999px;
  background: var(--wash, #f3f4f4); color: var(--ink); font-size: 0.9rem; font-weight: 500; line-height: 1.2;
  border: 1px solid transparent; transition: border-color 0.15s, background 0.15s;
}
.content .jump-links a:hover, .content .jump-links a:focus-visible { border-color: var(--section, #d8dada); color: var(--ink); }
.content .jump-links .n { font-size: 0.75rem; font-weight: 600; color: #fff; background: var(--accent); border-radius: 999px; padding: 0.1rem 0.5rem; }
.content h2[id] { scroll-margin-top: 4.5rem; }
/* Past events: note above the announcement */
.content p.notice { font-size: 0.9rem; color: #555; background: #f3f4f4; border-left: 3px solid #c9c9c9; padding: 0.5rem 0.8rem; margin: 0 0 1.5rem; }
/* About: closing links */
.content .buttons.cta-links { margin-top: 2rem; }

/* Linked documents (PDF) */
.content p.file a { display: inline-block; padding: 0.5rem 0.9rem; border: 1px solid var(--accent-soft); border-radius: 6px; }
.content p.file a::before { content: "\1F4C4\00a0"; }
.content p.file a:hover { border-color: var(--accent); }

/* Home: three feature tiles in the logo colours (About / Members / Register) above the latest news */
.cards.is-features { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5rem; }
.cards.is-features .card-pic.tile { aspect-ratio: 3 / 2; display: flex; align-items: flex-end; padding: 1.25rem 1.4rem; color: var(--ink); }
.cards.is-features .tile > span { font-size: 1.5rem; font-weight: 700; line-height: 1.25; font-feature-settings: "palt"; letter-spacing: 0.02em; transition: transform 0.35s ease; }
.cards.is-features a:hover .tile > span, .cards.is-features a:focus-visible .tile > span { transform: translateX(0.25rem); }
.cards .card-pic.tile-mauve { background: #bb76a4; }
.cards .card-pic.tile-teal { background: #5cbec1; }
.cards .card-pic.tile-sand { background: #f8ca79; }
.cards.is-features .card-excerpt { -webkit-line-clamp: 3; font-size: 0.875rem; margin-top: 0.75rem; }
@media (prefers-reduced-motion: reduce) { .cards.is-features .tile > span { transition: none; } }

/* Back to top: appears once the page is scrolled (public/js/site.js) */
.to-top {
  position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 30;
  width: 2.75rem; height: 2.75rem; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--accent); color: #fff; font-size: 1.3rem; line-height: 1; text-decoration: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); opacity: 0.9; transition: opacity 0.2s, transform 0.2s;
}
.to-top:hover, .to-top:focus-visible { color: #fff; opacity: 1; transform: translateY(-2px); }
.to-top[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* Gallery grids */
.gallery {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--tile), 1fr)); gap: 0.75rem;
}
.gallery.is-small { --tile: 140px; }
.gallery.is-captioned { --tile: 400px; gap: 2rem 1.5rem; align-items: start; }
.gallery li { margin: 0; }
.gallery .tile { display: block; }
.gallery .tile img { display: block; width: 100%; height: auto; transition: opacity 0.2s; }
.gallery:not(.is-captioned) .tile img { aspect-ratio: 1 / 1; object-fit: cover; }
.gallery .tile:hover img, .gallery .tile:focus-visible img { opacity: 0.85; }
.gallery figure { margin: 0; }
.gallery figcaption { margin-top: 0.5rem; font-size: 0.85rem; color: #555; line-height: 1.5; }

/* Lightbox: Bulma .modal with custom sizing and prev/next */
#lightbox .modal-content { width: auto; max-width: 95vw; max-height: 92vh; margin: 0 3.5rem; overflow: visible; }
#lightbox .lightbox-figure { margin: 0; }
#lightbox img { display: block; max-width: 100%; max-height: 82vh; width: auto; height: auto; margin: 0 auto; }
#lightbox figcaption { margin-top: 0.75rem; font-size: 0.9rem; }
.lightbox-nav {
  position: fixed; top: 50%; transform: translateY(-50%);
  width: 3rem; height: 4rem; border: 0; border-radius: 4px; cursor: pointer;
  background: rgba(0, 0, 0, 0.4); color: #fff; font-size: 2.5rem; line-height: 1;
}
.lightbox-nav:hover, .lightbox-nav:focus-visible { background: rgba(0, 0, 0, 0.7); }
.lightbox-prev { left: 0.5rem; }
.lightbox-next { right: 0.5rem; }
.lightbox-nav[hidden] { display: none; }

@media (max-width: 600px) {
  #lightbox .modal-content { margin: 0 0.5rem; }
  .lightbox-nav { width: 2.25rem; height: 3rem; font-size: 2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .gallery .tile img { transition: none; }
}

.footer { padding: 2rem 1.5rem; }
.footer .footer-links a + a::before { content: "\00b7"; margin: 0 0.5rem; color: #999; }