/* cl-land.pages.dev
   Rules: 1 typeface, 2 weights (400/700), 4 sizes, 5 spacing steps, 1 rule weight,
   1 grid column width (labels, dates, thumbnails), 2 colours (text, link) + background. No exceptions. */

:root {
  color-scheme: light dark;
  --bg: #ffffff;
  --fg: #000000;      /* 21:1 on --bg */
  --fg-2: #333333;    /* 12.6:1 */
  --link: #0000c8;    /* 12.2:1 */
  --line: #000000;
  --measure: 40rem;
  --col: 9em;                                  /* label column, every two-column list */
  --s1: .5rem; --s2: 1rem; --s3: 1.5rem; --s4: 2.5rem; --s5: 4rem;
  --f1: 2rem; --f2: 1.25rem; --f3: 1.125rem; --f4: .875rem;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000000;
    --fg: #ffffff;    /* 21:1 on --bg */
    --fg-2: #d0d0d0;  /* 13.9:1 */
    --link: #8ec5ff;  /* 12.0:1 */
    --line: #ffffff;
  }
}
@media (prefers-contrast: more) {
  :root { --fg-2: var(--fg); --link: var(--fg); }
}

*, ::before, ::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  margin: 0;
  padding: 0 var(--s3) var(--s5);
  background: var(--bg);
  color: var(--fg);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", Meiryo, sans-serif;
  font-size: clamp(1rem, .95rem + .3vw, 1.125rem);
  line-height: 1.7;
  overflow-wrap: break-word;
  text-wrap: pretty;
}
body > * { max-width: var(--measure); margin-inline: auto; }

/* ---------- links & focus ---------- */
a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
  overflow-wrap: anywhere;
}
a:hover { text-decoration-thickness: 2px; }
:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: 2px;
}
:focus:not(:focus-visible) { outline: none; }

/* ---------- skip link ---------- */
.skip {
  position: absolute;
  left: var(--s2);
  top: var(--s2);
  z-index: 1;
  padding: var(--s1) var(--s2);
  background: var(--fg);
  color: var(--bg);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-200%);
}
.skip:focus { transform: none; }

/* ---------- header ---------- */
.site-header { border-bottom: 1px solid var(--line); }
.masthead {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s3);
  padding: var(--s2) 0 0;
}
.brand {
  color: var(--fg);
  font-weight: 700;
  text-decoration: none;
  padding: .5rem 0;
}
.lang {
  color: var(--fg);
  text-decoration: none;
  padding: .5rem 0;
  font-size: var(--f4);
}
.lang:hover, .brand:hover { text-decoration: underline; }
.site-header ul {
  list-style: none;
  margin: 0 -.75rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}
.site-header li { margin: 0; }
.site-header nav a {
  display: inline-block;
  padding: .5rem .75rem;         /* ≥44px tap target */
  color: var(--fg);
  text-decoration: none;
}
.site-header nav a:hover { text-decoration: underline; text-underline-offset: .35em; }
.site-header nav a[aria-current="page"] {
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: .35em;
}

/* ---------- type ---------- */
main { padding-top: var(--s4); }
h1, h2, h3 {
  margin: 0;
  font-weight: 700;
  line-height: 1.25;
  text-wrap: balance;
}
h1 { font-size: var(--f1); margin-bottom: var(--s3); }
h2 { font-size: var(--f2); margin: var(--s4) 0 var(--s2); }
h3 { font-size: var(--f3); margin-bottom: var(--s1); }
p { margin: 0 0 var(--s2); }
ul, ol { margin: 0 0 var(--s2); padding-left: 1.25em; }
li { margin-bottom: var(--s1); }
strong { font-weight: 700; }
time { font-variant-numeric: tabular-nums; }
.lead { margin-bottom: var(--s3); }

/* ---------- two-column lists: facts, timeline, colophon (one grid) ---------- */
.facts, .colophon {
  display: grid;
  grid-template-columns: var(--col) 1fr;
  gap: var(--s1) var(--s2);
  margin: 0 0 var(--s4);
}
.facts dt, .colophon dt { font-weight: 700; }
.facts dd, .colophon dd { margin: 0; }
.timeline, .plain { list-style: none; padding: 0; margin: 0; }
.timeline li {
  display: grid;
  grid-template-columns: var(--col) 1fr;
  gap: 0 var(--s2);
  margin: 0;
  padding: var(--s1) 0;
  border-top: 1px solid var(--line);
}
.plain li { margin: 0; padding: var(--s1) 0; border-top: 1px solid var(--line); }
.timeline time, .timeline li > span { color: var(--fg-2); }
@media (max-width: 30rem) {
  .facts, .colophon { grid-template-columns: 1fr; gap: 0; }
  .facts dd, .colophon dd { margin-bottom: var(--s2); }
  .timeline li { grid-template-columns: 1fr; }
}

/* ---------- home index ---------- */
.index { list-style: none; padding: 0; margin: 0; }
.index li { margin: 0; padding: var(--s2) 0; border-top: 1px solid var(--line); }
.index li:last-child { border-bottom: 1px solid var(--line); }
.index a { font-weight: 700; }
.index .sub { color: var(--fg-2); margin-left: var(--s2); }

/* ---------- publications ---------- */
.pubs { list-style: none; padding: 0; margin: 0; }
.pub { margin: 0; padding: var(--s3) 0; border-top: 1px solid var(--line); }
.pub p { margin: 0; }
.authors, .venue, .gloss { color: var(--fg-2); }
.authors strong { color: var(--fg); }
.gloss { font-weight: 400; }
.links {
  list-style: none;
  margin: var(--s1) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--s3);
}
.links li { margin: 0; }
.links a { display: inline-block; padding: .45rem 0; }   /* ≥44px tap target */

/* ---------- projects: figures, cards ---------- */
img { max-width: 100%; height: auto; display: block; }
figure { margin: 0 0 var(--s3); }
figure.hero { margin-bottom: var(--s4); }
figcaption { color: var(--fg-2); font-size: var(--f4); margin-top: var(--s1); }
.figs { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.figs figure { margin: 0; }
@media (max-width: 30rem) { .figs { grid-template-columns: 1fr; } }
.cards { list-style: none; padding: 0; margin: 0; }
.card {
  display: grid;
  grid-template-columns: var(--col) 1fr;
  gap: var(--s2);
  margin: 0;
  padding: var(--s3) 0;
  border-top: 1px solid var(--line);
}
.card:last-child { border-bottom: 1px solid var(--line); }
.card h2 { margin: 0 0 var(--s1); font-size: var(--f3); }
.card p { margin: 0; }
.card .sub { color: var(--fg-2); font-weight: 400; margin-left: var(--s1); }
.thumb img { aspect-ratio: 16 / 9; object-fit: cover; }
.video iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; background: var(--fg-2); }
@media (max-width: 30rem) { .card { grid-template-columns: 1fr; } }

/* ---------- footer (colophon) ---------- */
.site-footer {
  margin-top: var(--s5);
  padding-top: var(--s3);
  border-top: 1px solid var(--line);
  font-size: var(--f4);
}
.site-footer .colophon { margin-bottom: var(--s3); }
.site-footer ul { list-style: none; margin: 0 0 var(--s2); padding: 0; display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); }
.site-footer li { margin: 0; }
.copyright { margin: 0; color: var(--fg-2); }

/* ---------- preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media print {
  .skip, .site-header nav, .lang { display: none; }
  body { color: #000; background: #fff; }
  a { color: #000; }
  .links a[href^="http"]::after { content: " (" attr(href) ")"; }
}