/* Image-first archive: full-screen opening, white ground, text reduced to name and year. */
:root {
  --ground: #FFFFFF;
  --ink: #161616;
  --quiet: #787878;
  --line: #E6E6E6;
  --well: #F3F3F3;
  --hl: #E0531F;          /* method highlight */
  --on-light: #333333;   /* text over light photographs */
  --on-dark: #FFFFFF;    /* text over dark photographs */
  --sans: "Helvetica Neue", Helvetica, Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", sans-serif;
  --gutter: max(16px, min(2.6vw, 40px));
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }
body { margin: 0; background: var(--ground); color: var(--ink); font: 400 15px/1.55 var(--sans); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
h2, p { margin: 0; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

/* header: floats over the opening, solid after it */
.top {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20;
  display: flex; align-items: baseline; gap: 28px;
  padding: calc(16px + env(safe-area-inset-top, 0px)) calc(var(--gutter) + env(safe-area-inset-right, 0px)) 16px calc(var(--gutter) + env(safe-area-inset-left, 0px));
  transition: color .5s ease, background-color .3s ease;
}
.top.on-dark { color: var(--on-dark); }
.top.on-light { color: var(--on-light); }
.top.solid { color: var(--ink); background: var(--ground); }
.name { text-decoration: none; font-weight: 500; }
.menu { display: flex; gap: 22px; margin-left: auto; }
.menu a { text-decoration: none; opacity: .72; font-weight: 500; }
.menu a:hover { opacity: 1; }
.lang { display: flex; gap: 10px; font-size: 13px; }
.lang button { opacity: .55; }
.lang button[aria-pressed="true"] { opacity: 1; }

/* opening slideshow */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 480px; overflow: hidden; background: #0f0f0f; }
.hero-slides img {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
  object-fit: cover; opacity: 0; transition: opacity 1.2s ease;
}
.hero-slides img.is-on { opacity: 1; }
.hero-slides img.contain {
  object-fit: contain;
  top: calc(72px + env(safe-area-inset-top, 0px)); left: var(--gutter);
  width: calc(100% - 2 * var(--gutter)); height: calc(100% - 182px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
}
.hero { transition: background-color 1.2s ease; }
.hero-foot {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
  padding: 0 calc(var(--gutter) + env(safe-area-inset-right, 0px)) calc(24px + env(safe-area-inset-bottom, 0px)) calc(var(--gutter) + env(safe-area-inset-left, 0px));
  transition: color .5s ease;
}
.hero-foot.on-dark { color: var(--on-dark); }
.hero-foot.on-light { color: var(--on-light); }
.hero-cap { text-align: left; font-size: 15px; line-height: 1.4; max-width: 30em; }
.hero-cap .y { display: block; font-size: 13px; opacity: .75; }
.hero-cap:hover .t { text-decoration: underline; text-underline-offset: 4px; }

/* shared slider controls: thin line, counter, arrows */
.slider-ui { display: grid; gap: 10px; justify-items: end; flex: none; }
.ticks { display: flex; gap: 4px; }
.ticks button { width: 22px; height: 14px; position: relative; }
.ticks button::before { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 1px; background: currentColor; opacity: .35; }
.ticks button span { position: absolute; left: 0; top: 6px; height: 1px; width: 0; background: currentColor; }
.ticks button.is-past span { width: 100%; }
.ticks button.is-on span { animation: fill var(--dur, 6s) linear forwards; }
.ticks.paused button.is-on span { animation-play-state: paused; }
@keyframes fill { from { width: 0; } to { width: 100%; } }
.steps { display: flex; align-items: center; gap: 14px; font-size: 13px; font-variant-numeric: tabular-nums; }
.steps button { width: 28px; height: 28px; display: grid; place-items: center; font-size: 15px; opacity: .8; }
.steps button:hover { opacity: 1; }
.count { min-width: 4.2em; text-align: center; }

/* section bars */
.archive, .bookshelf, .chrono, .info { padding: clamp(72px, 12vh, 140px) var(--gutter) 0; }
.bar { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 28px; margin-bottom: 22px; }
.bar h2 { font-size: 15px; font-weight: 400; }
.filters, .views { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; }
.views { margin-left: auto; gap: 4px; }
.vbtn { width: 32px; height: 28px; display: grid; place-items: center; border-radius: 6px; }
.vbtn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.views .vbtn[aria-pressed="true"] { text-decoration: none; background: var(--well); color: var(--ink); }
.filters button, .views button { color: var(--quiet); }
.filters button[aria-pressed="true"], .views button[aria-pressed="true"] { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.n { font-variant-numeric: tabular-nums; }

/* justified image sheet */
.sheet { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 28px 12px; }
.tile { display: block; text-align: left; flex: none; }
.tile .frame { display: block; background: var(--well); overflow: hidden; }
.tile img { width: 100%; height: 100%; object-fit: cover; transition: opacity .2s; }
.tile.blank .frame { display: grid; place-items: center; color: var(--quiet); font-size: 12px; }
.tile .cap { display: flex; gap: 10px; margin-top: 7px; font-size: 13px; line-height: 1.35; }
.tile .cap .y { color: var(--quiet); font-variant-numeric: tabular-nums; flex: none; }
.tile:hover img { opacity: .86; }
.tile .med { display: block; margin-top: 3px; font-size: 12px; color: var(--quiet); line-height: 1.35; }
.media { display: flex; flex-wrap: wrap; gap: 6px; margin: -6px 0 26px; }
.media button { font-size: 12px; line-height: 1; padding: 6px 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--quiet); }
.media button.chip.design { border-radius: 2px; }
.media button:hover { border-color: var(--quiet); color: var(--ink); }
.media button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--ground); }
.media .n { opacity: .6; margin-left: 2px; }

.list { list-style: none; margin: 0; padding: 0; width: 100%; border-top: 1px solid var(--ink); }
.list-head, .list button { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1.2fr) 6rem; gap: 16px; }
.list .mt { font-size: 12.5px; color: #555; line-height: 1.35; }
.listwrap { width: 100%; }
.list-head { font-size: 11.5px; color: var(--quiet); padding: 0 0 7px; letter-spacing: .02em; }
.list-head span:last-child { text-align: right; }
.list button { width: 100%; text-align: left; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; align-items: center; }
.list .v { font-size: 13px; color: var(--quiet); line-height: 1.35; }
.chips { display: flex; flex-wrap: wrap; gap: 4px; }
.chip { font-size: 11.5px; line-height: 1; padding: 4px 8px; border: 1px solid var(--line); color: #555; white-space: nowrap; }
.chip.art { border-radius: 999px; }
.chip.design { border-radius: 2px; }
.list .y { text-align: right; }
.list button:hover { color: var(--quiet); }
.list .y { color: var(--quiet); font-variant-numeric: tabular-nums; }

/* artistic practice in its two pillars */
.pillar + .pillar { margin-top: 56px; }
.pillar h3 { margin: 0 0 16px; font-size: 13px; font-weight: 400; color: var(--quiet); padding-top: 14px; border-top: 1px solid var(--line); }
.pillar h3 .n { margin-left: 6px; }
.pillar-sheet { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 28px 12px; }

/* bookshelf: every shelf visible at once */
.shelfrow { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 16px var(--gutter); padding: 24px 0; border-top: 1px solid var(--line); }
.shelfrow h3 { margin: 0; font-size: 13px; font-weight: 400; color: var(--quiet); }
.shelfrow h3 .n { margin-left: 6px; }
.books { display: flex; flex-wrap: wrap; align-items: flex-end; align-content: flex-start; gap: 28px clamp(20px, 3vw, 44px); }
.book { text-align: left; }
.book img { height: clamp(120px, 13vw, 190px); width: auto; max-width: 280px; }
.book span { display: block; margin-top: 8px; font-size: 12.5px; line-height: 1.35; max-width: 20ch; }
.book:hover span { color: var(--quiet); }

/* chronological index */
.chrono-body { display: grid; grid-template-columns: minmax(0, 1fr) 15rem; gap: 32px; align-items: start; }
.chart { --label: 12rem; position: relative; }
.axis, .lane { display: grid; grid-template-columns: var(--label) minmax(0, 1fr); }
.axis { position: sticky; top: var(--hdr, 56px); z-index: 3; background: var(--ground); padding: 6px 0; border-bottom: 1px solid var(--ink); font-size: 11.5px; color: var(--quiet); font-variant-numeric: tabular-nums; }
.years { position: relative; height: 16px; }
.years span { position: absolute; top: 0; transform: translateX(-1px); }
.trackhead { display: flex; align-items: baseline; gap: 10px; margin-top: 28px; padding-bottom: 6px; font-size: 13px; }
.trackhead b { font-weight: 500; }
.trackhead span { color: var(--quiet); }
.trackhead .soon { margin-left: auto; font-size: 11.5px; border: 1px dashed var(--line); border-radius: 999px; padding: 2px 9px; }
.lane { border-top: 1px solid var(--line); min-height: 30px; }
.lane > .lbl { font-size: 12.5px; color: var(--quiet); padding: 7px 12px 7px 0; line-height: 1.3; }
.marks { position: relative; }
.grid-lines { position: absolute; inset: 0; pointer-events: none; }
.grid-lines i { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--line); opacity: .6; }
.mark {
  position: absolute; height: 8px; min-width: 8px; border-radius: 4px;
  background: var(--ink); transition: background-color .15s, transform .15s;
}
.mark::after { content: ""; position: absolute; inset: -7px -2px; }
.mark.design { background: #9A9A9A; }
.mark.project { background: transparent; border: 1px dashed var(--ink); height: 10px; border-radius: 5px; }
.mark.project::before { content: "→"; position: absolute; right: -16px; top: -6px; font-size: 12px; }
.mark.is-on, .mark:hover, .mark:focus-visible { background: var(--ink); transform: scaleY(1.6); outline: none; }
.mark.project.is-on, .mark.project:hover { background: var(--well); }
.chart.dim .mark:not(.is-on) { opacity: .35; }
.float {
  position: absolute; width: 8px; height: 8px; border-radius: 50%; background: #C9C9C6;
  animation: drift 7s ease-in-out infinite alternate;
}
.float.named { background: #9E9E9A; }
.float::after { content: ""; position: absolute; inset: -6px; }
.float:hover, .float.is-on, .float:focus-visible { background: var(--ink); outline: none; }
@keyframes drift { from { transform: translate(-3px, -4px); } to { transform: translate(3px, 4px); } }
.peek { position: sticky; top: 96px; font-size: 13px; display: grid; gap: 8px; }
.peek img { width: 100%; max-height: 240px; object-fit: contain; object-position: left top; }
.peek .t { font-size: 15px; line-height: 1.35; }
.peek .s { color: var(--quiet); }
.peek .go { justify-self: start; border-bottom: 1px solid currentColor; margin-top: 4px; }
.peek .hint { color: var(--quiet); }

/* info */
.info { display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 20px var(--gutter); padding-bottom: 120px; }
.info h2 { font-size: 15px; font-weight: 400; }
.info-text { font-size: 17px; line-height: 1.65; max-width: 36em; display: grid; gap: .9em; align-content: start; }
.info-text[hidden] { display: none; }
.info-text .lead { font-size: 21px; line-height: 1.45; }
.info-side { display: grid; gap: 24px; align-content: start; font-size: 13.5px; }
.info-side h3 { margin: 0 0 6px; font-size: 13px; font-weight: 400; color: var(--quiet); }
.plain { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.links { grid-column: 2 / -1; display: grid; gap: 12px; margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--line); }
.links h3 { margin: 0; font-size: 13px; font-weight: 400; color: var(--quiet); }
.links h3 + .partners { margin-top: -2px; }
.linkcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; margin-bottom: 18px; }
.linkcard {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 12px; align-items: center;
  padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px; text-decoration: none; color: var(--ink);
}
.linkcard .logo { grid-row: span 2; width: 28px; height: 28px; object-fit: contain; }
.linkcard .lbl { font-size: 15px; grid-column: 2; }
.linkcard .sub { grid-column: 2; font-size: 12.5px; color: var(--quiet); line-height: 1.4; }
.linkcard .sub[hidden] { display: none; }
.linkcard .arr { grid-column: 3; grid-row: 1 / span 2; color: var(--quiet); }
a.linkcard:hover { border-color: var(--ink); }
.linkcard.off { border-style: dashed; color: var(--quiet); }
.partners { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 13.5px; color: #444; }
.partners img { height: 26px; width: auto; filter: grayscale(1); opacity: .8; }
.foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; }
.foot-links { display: flex; gap: 18px; }
.foot-links a { text-decoration: none; }
.foot-links a:hover { color: var(--ink); }
.foot { padding: 20px var(--gutter) calc(28px + env(safe-area-inset-bottom, 0px)); font-size: 12px; color: var(--quiet); }

/* overlays: the image fills the screen, the ground takes the image's own edge colour,
   controls float on fixed positions and switch tone with the ground */
.shell {
  --s-bg: #FFFFFF; --s-fg: #161616; --s-soft: rgb(22 22 22 / .62); --s-veil: rgb(255 255 255 / .9);
  position: fixed; inset: 0; z-index: 40; background: var(--s-bg); color: var(--s-fg);
  transition: background-color .5s ease, color .4s ease;
}
.shell.dark { --s-fg: #F4F4F2; --s-soft: rgb(244 244 242 / .66); --s-veil: rgb(20 20 20 / .82); }
.shell[hidden] { display: none; }
.ic {
  width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%;
  color: inherit; position: relative;
}
.ic svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ic:hover, .ic[aria-pressed="true"] { background: color-mix(in srgb, currentColor 12%, transparent); }
.ic[data-tip]::after {
  content: attr(data-tip); position: absolute; right: calc(100% + 8px); top: 50%; transform: translateY(-50%);
  white-space: nowrap; font-size: 12px; padding: 3px 8px; border-radius: 4px;
  background: var(--s-veil, var(--ground)); color: inherit; opacity: 0; pointer-events: none; transition: opacity .15s;
}
@media (hover: hover) { .ic[data-tip]:hover::after { opacity: 1; } }
.rail {
  position: fixed; z-index: 8; display: grid; gap: 6px;
  top: calc(12px + env(safe-area-inset-top, 0px)); right: calc(12px + env(safe-area-inset-right, 0px));
}
.s-title {
  position: fixed; z-index: 7; max-width: min(60vw, 520px);
  top: calc(20px + env(safe-area-inset-top, 0px)); left: calc(var(--gutter) + env(safe-area-inset-left, 0px));
  font-size: 14px; line-height: 1.35;
}
.s-sub { color: var(--s-soft); margin-left: 8px; }
.s-note {
  position: fixed; z-index: 7; max-width: min(56vw, 640px);
  left: calc(var(--gutter) + env(safe-area-inset-left, 0px)); bottom: calc(22px + env(safe-area-inset-bottom, 0px));
  font-size: 12px; line-height: 1.4; color: var(--s-soft);
}
.s-note[hidden] { display: none; }
.s-steps {
  position: fixed; z-index: 7; display: flex; align-items: center; gap: 4px;
  right: calc(12px + env(safe-area-inset-right, 0px)); bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  font-size: 13px; font-variant-numeric: tabular-nums;
}
.s-steps[hidden] { display: none; }
.s-steps .count { min-width: 4.4em; text-align: center; }
.s-steps .ic:disabled { opacity: .25; cursor: default; background: none; }

/* gallery */
.g-stage { position: absolute; inset: 0; }
.g-frame {
  position: absolute;
  inset: calc(64px + env(safe-area-inset-top, 0px)) calc(64px + env(safe-area-inset-right, 0px)) calc(64px + env(safe-area-inset-bottom, 0px)) calc(var(--gutter) + env(safe-area-inset-left, 0px));
}
.g-frame img {
  position: absolute; inset: 0; margin: auto; width: 100%; height: 100%;
  max-width: min(100%, calc(var(--nw, 9999px) * 2)); max-height: min(100%, calc(var(--nh, 9999px) * 2));
  object-fit: contain; opacity: 0; transition: opacity .45s ease;
}
.g-frame img.is-on { opacity: 1; }
.g-hit { position: absolute; top: 0; bottom: 0; width: 50%; z-index: 1; }
.g-hit.prev { left: 0; cursor: w-resize; }
.g-hit.next { right: 0; cursor: e-resize; }
.g-hit:focus-visible { outline-offset: -6px; }
.g-grid {
  position: absolute; inset: 0; z-index: 6; overflow-y: auto; background: var(--s-bg);
  display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; align-content: start;
  padding: calc(68px + env(safe-area-inset-top, 0px)) calc(68px + env(safe-area-inset-right, 0px)) 32px var(--gutter);
}
.g-grid[hidden] { display: none; }
.g-grid button { aspect-ratio: 4 / 3; }
.g-grid img { width: 100%; height: 100%; object-fit: contain; }
.g-grid button[aria-current="true"] { outline: 1px solid currentColor; outline-offset: 4px; }
.g-info {
  position: fixed; z-index: 7; top: 0; right: 0; bottom: 0; width: min(420px, 100vw);
  background: var(--s-veil); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  overflow-y: auto; padding: calc(64px + env(safe-area-inset-top, 0px)) calc(64px + env(safe-area-inset-right, 0px)) 32px 28px;
}
.g-info[hidden] { display: none; }
.g-info-in { display: grid; gap: 16px; }
.g-info h2 { font-size: 20px; font-weight: 400; line-height: 1.3; }
.v-sub { color: var(--s-soft); font-size: 13px; margin-top: -10px; }
.v-body p { margin: 0 0 .8em; }
.v-body .pdf, .v-body .lnk { font-size: 14px; }
.v-body .lnk button { text-decoration: underline; text-underline-offset: 4px; }
.v-facts { margin: 0; display: grid; gap: 10px; font-size: 13px; }
.v-facts div { display: grid; gap: 1px; }
.v-facts dt { color: var(--s-soft); }
.v-facts dd { margin: 0; }
.i-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; border-top: 1px solid color-mix(in srgb, currentColor 20%, transparent); padding-top: 14px; margin-top: 8px; }
.i-nav button { text-align: left; display: grid; gap: 3px; align-content: start; }
.i-nav button:last-child { text-align: right; }
.i-nav small { font-size: 11.5px; color: var(--s-soft); letter-spacing: .02em; }
.i-nav cite { font-family: Georgia, "Times New Roman", "Hiragino Mincho ProN", "Yu Mincho", serif; font-style: italic; font-size: 14px; line-height: 1.35; }
.i-nav button:hover cite { text-decoration: underline; text-underline-offset: 3px; }

/* medium tags */
.tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.tags li { font-size: 12px; line-height: 1; padding: 5px 9px; border: 1px solid color-mix(in srgb, currentColor 30%, transparent); border-radius: 999px; }

/* book reader */
.reader { --s-bg: #ECECEA; }
.r-stage {
  position: absolute; display: grid; place-items: center; perspective: 2600px; overflow: hidden;
  inset: calc(60px + env(safe-area-inset-top, 0px)) calc(60px + env(safe-area-inset-right, 0px)) calc(60px + env(safe-area-inset-bottom, 0px)) calc(var(--gutter) + env(safe-area-inset-left, 0px));
}
.r-hint { position: fixed; left: var(--gutter); bottom: calc(22px + env(safe-area-inset-bottom, 0px)); font-size: 13px; color: var(--s-soft); }
.r-book { position: relative; transition: transform .6s cubic-bezier(.3, .1, .2, 1); transform-style: preserve-3d; }
.r-page { position: absolute; top: 0; height: 100%; width: 50%; background: #FFFFFF; overflow: hidden; }
.r-page.left { left: 0; box-shadow: -1px 1px 3px rgb(0 0 0 / .08); }
.r-page.right { right: 0; box-shadow: 1px 1px 3px rgb(0 0 0 / .08); }
.r-page.empty { background: transparent; box-shadow: none; }
.r-page.empty::after { display: none; }
.r-page img { width: 100%; height: 100%; max-width: none; object-fit: contain; }
.r-page .half, .r-leaf .face .half { width: 100%; height: 100%; background-repeat: no-repeat; background-size: 200% 100%; }
.r-page.left::after, .r-page.right::after { content: ""; position: absolute; top: 0; bottom: 0; width: 28px; pointer-events: none; }
.r-page.left::after { right: 0; background: linear-gradient(to left, rgb(0 0 0 / .10), transparent); }
.r-page.right::after { left: 0; background: linear-gradient(to right, rgb(0 0 0 / .10), transparent); }
.r-page.cover { background: transparent; box-shadow: none; overflow: visible; }
.r-page.cover::after { display: none; }
.r-page.cover img { transform: scale(1.18); }
.r-leaf {
  position: absolute; top: 0; right: 0; width: 50%; height: 100%; z-index: 5;
  transform-origin: left center; transform-style: preserve-3d;
  transition: transform .7s cubic-bezier(.35, .1, .25, 1);
}
.r-leaf.back-turn { left: 0; right: auto; transform-origin: right center; }
.r-leaf .face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; background: #FFFFFF; overflow: hidden; }
.r-leaf .face.back { transform: rotateY(180deg); }
.r-leaf .face img { width: 100%; height: 100%; max-width: none; object-fit: contain; }
.r-leaf .face.is-cover { background: transparent; }
.r-hit { position: absolute; top: 0; bottom: 0; width: 50%; z-index: 6; }
.r-hit.prev { left: 0; cursor: w-resize; }
.r-hit.next { right: 0; cursor: e-resize; }
.r-hit:focus-visible { outline-offset: -4px; }
.r-single .r-page { width: 100%; }
.r-single .r-page::after { display: none; }

/* back to top on the main page */
.to-top {
  position: fixed; z-index: 15; right: calc(12px + env(safe-area-inset-right, 0px)); bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  background: var(--ground); color: var(--ink); box-shadow: 0 0 0 1px var(--line);
}
.to-top[hidden] { display: none; }
.to-top[data-tip]::after { --s-veil: var(--ground); box-shadow: 0 0 0 1px var(--line); }
body.locked { overflow: hidden; }

/* tablets */
@media (max-width: 1020px) {
  .chrono-body { grid-template-columns: 1fr; }
  .peek { position: static; grid-template-columns: 120px minmax(0, 1fr); align-items: start; column-gap: 16px; min-height: 96px; }
  .peek img { grid-row: span 4; max-height: 120px; }
}

/* phones */
@media (max-width: 760px) {
  body { font-size: 14.5px; }
  .top { gap: 6px 16px; flex-wrap: wrap; padding-top: calc(12px + env(safe-area-inset-top, 0px)); padding-bottom: 10px; }
  .menu { order: 3; width: 100%; margin-left: 0; gap: 18px; font-size: 14px; }
  .lang { margin-left: auto; }
  .hero-foot { flex-direction: column; align-items: stretch; gap: 14px; }
  .slider-ui { grid-template-columns: minmax(0, 1fr) auto; align-items: center; justify-items: stretch; }
  .ticks button { flex: 1; width: auto; }
  .archive, .bookshelf, .chrono, .info { padding-top: 64px; }
  .views { margin-left: 0; }
  .sheet { gap: 20px 8px; }
  .tile .cap { font-size: 12px; gap: 6px; flex-direction: column; }
  .list-head { display: none; }
  .list button { grid-template-columns: minmax(0, 1fr) auto; gap: 5px 12px; }
  .list .chips { grid-column: 1 / -1; grid-row: 2; }
  .list .v { grid-column: 1 / -1; grid-row: 3; font-size: 12px; }
  .list .v:empty { display: none; }
  .list .y { grid-column: 2; grid-row: 1; }
  .media { flex-wrap: nowrap; overflow-x: auto; margin-right: calc(-1 * var(--gutter)); padding-right: var(--gutter); scrollbar-width: none; }
  .media::-webkit-scrollbar { display: none; }
  .media button { flex: none; }
  .shelfrow { grid-template-columns: 1fr; gap: 14px; padding: 20px 0; }
  .books { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
  .book img { height: auto; width: 100%; max-width: 100%; max-height: 180px; object-fit: contain; object-position: left bottom; }
  .chart { --label: 0px; }
  .axis { grid-template-columns: minmax(0, 1fr); }
  .axis > :first-child { display: none; }
  .lane { grid-template-columns: minmax(0, 1fr); border-top: 0; }
  .lane > .lbl { padding: 10px 0 4px; font-size: 12px; border-top: 1px solid var(--line); }
  .marks { min-height: 22px; }
  .years .odd { display: none; }
  .peek {
    position: sticky; bottom: 0; z-index: 4; grid-template-columns: 72px minmax(0, 1fr);
    margin: 0 calc(-1 * var(--gutter)); padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom, 0px));
    background: var(--ground); border-top: 1px solid var(--line); min-height: 0;
  }
  .peek img { max-height: 72px; }
  .info { grid-template-columns: 1fr; }
  .info-text { font-size: 16px; }
  .rail { top: calc(8px + env(safe-area-inset-top, 0px)); right: calc(6px + env(safe-area-inset-right, 0px)); grid-auto-flow: column; gap: 2px; }
  .s-title { top: calc(18px + env(safe-area-inset-top, 0px)); max-width: calc(100vw - 200px); font-size: 13px; }
  .s-sub { display: block; margin-left: 0; }
  .ic[data-tip]::after { display: none; }
  .g-frame { inset: calc(64px + env(safe-area-inset-top, 0px)) 0 calc(56px + env(safe-area-inset-bottom, 0px)) 0; }
  .g-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: calc(64px + env(safe-area-inset-top, 0px)) var(--gutter) 24px; }
  .g-info { top: auto; left: 0; width: 100%; max-height: 70vh; padding: 22px var(--gutter) calc(28px + env(safe-area-inset-bottom, 0px)); border-radius: 14px 14px 0 0; }
  .s-steps { left: 0; right: 0; justify-content: center; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }
  .r-stage { inset: calc(64px + env(safe-area-inset-top, 0px)) var(--gutter) calc(56px + env(safe-area-inset-bottom, 0px)); }
  .r-hint { display: none; }
  .s-note { left: var(--gutter); right: var(--gutter); max-width: none; bottom: calc(52px + env(safe-area-inset-bottom, 0px)); text-align: center; }
  .hero-slides img.contain { top: calc(96px + env(safe-area-inset-top, 0px)); height: calc(100% - 250px); }
  .info-text .lead { font-size: 19px; }
  .links { grid-column: 1; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-slides img, .tile img, .top, .hero-foot, .mark { transition: none; }
  .ticks button.is-on span { animation: none; width: 100%; }
  .g-frame img, .r-book, .r-leaf, .shell { transition: none; }
  .float { animation: none; }
}

/* legal pages */
.legal .top { position: static; }
.legal-main { padding: 40px var(--gutter) 80px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 48px; max-width: 1100px; }
.legal-main h1 { font-size: 22px; font-weight: 400; margin: 0 0 12px; }
.legal-main h2 { font-size: 15px; font-weight: 500; margin: 28px 0 6px; }
.legal-main p { margin: 0 0 10px; max-width: 38em; font-size: 14.5px; overflow-wrap: anywhere; }
.legal-main .muted { color: var(--quiet); }
section[id] { scroll-margin-top: calc(var(--hdr, 56px) + 8px); }
.info-side .bg { max-width: 34em; line-height: 1.6; }

.ic.ic-ret { width: 44px; height: 46px; border-radius: 10px; grid-template-rows: auto auto; gap: 1px; align-content: center; }
.ic.ic-ret svg { width: 18px; height: 18px; }
.ic-lbl { font-size: 9.5px; line-height: 1; letter-spacing: .04em; }

.facets { display: grid; gap: 8px; margin: -6px 0 26px; }
.facet { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); align-items: baseline; gap: 10px; }
.facet[hidden] { display: none; }
.facet-lbl { font-size: 11.5px; color: var(--quiet); }
.facets .media { margin: 0; }
.media.methods button { border: 0; border-bottom: 1px dotted var(--line); border-radius: 0; padding: 5px 2px; }
.media.methods button[aria-pressed="true"] { background: none; color: var(--hl); border-bottom: 1px solid var(--hl); }
.media.methods button[aria-pressed="true"] .n { color: var(--hl); }
/* method highlight: nothing is hidden, matching works are marked */
.tile .frame { position: relative; }
.tile, .list li { transition: opacity .25s; }
.tile.miss, .list li.miss { opacity: .28; }
.tile.miss:hover, .list li.miss:hover { opacity: .7; }
.tile.hit .frame { outline: 2px solid var(--hl); outline-offset: -2px; }
.mtag { position: absolute; left: 0; top: 0; z-index: 1; background: var(--hl); color: #fff; font-size: 11px; line-height: 1; padding: 5px 7px 6px; }
.list .mk.on { color: var(--hl); }
.list li.hit .t { color: var(--hl); }
.tags li.m { border: 0; border-bottom: 1px dotted currentColor; border-radius: 0; padding: 5px 2px; }
@media (max-width: 760px) {
  .facet { grid-template-columns: 1fr; gap: 4px; }
  .list .mt { grid-column: 1 / -1; grid-row: 3; }
  .list .v { grid-row: 4; }
}

/* archive filters stay under the header while scrolling the works */
.tools { position: sticky; top: var(--top-h, 52px); z-index: 15; background: var(--ground); margin: 0 calc(-1 * var(--gutter)) 22px; padding: 10px var(--gutter) 0; }
.tools .bar { margin-bottom: 14px; }
.tools .facets { margin: 0; padding-bottom: 12px; }
.tools.stuck { border-bottom: 1px solid var(--line); }
@media (max-width: 720px) {
  .tools .facet .media { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .tools .facet .media::-webkit-scrollbar { display: none; }
  .tools .facet .media button { flex: none; }
  .tools { padding-top: 6px; }
  .tools .bar { flex-wrap: nowrap; gap: 14px; margin-bottom: 10px; }
  .tools .bar h2 { display: none; }
  .tools .filters { flex-wrap: nowrap; gap: 14px; white-space: nowrap; }
  .tools .facets { gap: 6px; padding-bottom: 8px; }
  .tools .facet { grid-template-columns: 3.4rem minmax(0, 1fr); gap: 6px; align-items: center; }
}

/* names (work titles, venues, places): a light slant; methods and labels stay upright */
.hero-cap .t, .tile .cap .t, .list .t, .list .v, .book span, #iTitle, #rTitle, #gTitle, .v-body .lnk button, .peek .t {
  /* a synthetic italic is ~12deg; skew by hand for a lighter slant */
  display: inline-block; transform: skewX(-6deg); transform-origin: 0 100%;
}
.list .t, .list .v, .book span, #iTitle { display: block; }
html[lang="ja"] .hero-cap .t, html[lang="ja"] .tile .cap .t, html[lang="ja"] .list .t, html[lang="ja"] .book span,
html[lang="ja"] #iTitle, html[lang="ja"] #rTitle, html[lang="ja"] #gTitle, html[lang="ja"] .v-body .lnk button, html[lang="ja"] .peek .t { transform: none; }

/* bookshelf: every cover in the same box, titles in a fixed two-line band */
.books { display: grid; grid-template-columns: repeat(auto-fill, 168px); gap: 28px clamp(20px, 3vw, 40px); align-items: start; }
.book { width: 168px; }
.book img { display: block; width: 168px; height: 180px; max-width: none; object-fit: contain; object-position: left bottom; }
.book span { width: 168px; max-width: none; margin-top: 10px; height: calc(2 * 1.35em); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
@media (max-width: 720px) {
  .books { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
  .book, .book span { width: auto; }
  .book img { width: 100%; height: 150px; max-height: none; }
}

/* research question above the description in the work info */
.v-body .q { font-size: 15px; line-height: 1.5; padding-left: 12px; border-left: 2px solid currentColor; margin-bottom: 14px; }

/* contact form */
.cform { display: grid; gap: 12px; max-width: 30em; margin-top: 4px; }
.cform label { display: grid; gap: 4px; }
.cform label span { font-size: 12px; color: var(--quiet); }
.cform input, .cform textarea { font: inherit; font-size: 14px; color: var(--ink); background: var(--ground); border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 6px 0; outline: none; resize: vertical; }
.cform textarea { border: 1px solid var(--line); padding: 8px; }
.cform input:focus, .cform textarea:focus { border-color: var(--ink); }
.cform .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.cform .cnote { margin: 0; font-size: 11.5px; color: var(--quiet); line-height: 1.5; }
.cform .cnote a { color: inherit; }
.cform button { justify-self: start; font: inherit; font-size: 13px; padding: 7px 18px; border: 1px solid var(--ink); border-radius: 999px; background: var(--ink); color: var(--ground); cursor: pointer; }
.cform button:disabled { opacity: .5; cursor: default; }
.cform .cstatus { margin: 0; font-size: 12.5px; min-height: 1.2em; }
.cform .cstatus.ok { color: #2f6b3a; }
.cform .cstatus.err { color: #a33; }

/* tile caption: title first, then medium and year */
.tile .med { display: flex; flex-wrap: wrap; gap: 0 12px; }
.tile .med .y { font-variant-numeric: tabular-nums; }