/* =========================================================
* Koike Lab — Components & Motion
*
* Everything here composes from one image: a spine with two
* breathing arms (sky + violet) and a green bud. The logo is
* Ψ — and the lab is bridging two sides of inquiry around one
* central question. The site visualises that bridge.
*
* Sections:
* 01 Section markers (Ψ glyph + label)
* 02 Site header
* 03 Hero — home (the living mark)
* 04 Hero — page
* 05 Home § intro + news
* 06 Home § projects (4 cards)
* 07 Home § stats
* 08 Home § content cards
* 09 Home § CTA
* 10 Page lists (news, posts)
* 11 Page single (prose, member, papers)
* 12 Members grid
* 13 Papers
* 14 Buttons & brush links
* 15 Site footer
* 16 Motion — reveals + breathing
* 17 Mobile
* ========================================================= */
/* =========================================================
* 01 SECTION MARKERS
* A tiny Ψ + label. Same shape everywhere — the lab's
* signature mark used as a section number.
* ========================================================= */
.section-mark {
display: inline-flex;
align-items: center;
gap: 0.6rem;
font-family: var(--font-mono);
font-size: 0.78rem;
font-weight: 500;
color: var(--ink-soft);
letter-spacing: 0.16em;
text-transform: uppercase;
margin: 0 0 var(--s-3);
line-height: 1;
}
.section-mark::before {
/* Font Awesome solid "seedling" — the lab's growth signature. */
content: "\f4d8";
font-family: "Font Awesome 6 Free";
font-weight: 900;
font-size: 1.05rem;
line-height: 1;
letter-spacing: normal;
color: var(--leaf-2);
-webkit-font-smoothing: antialiased;
}
:lang(ja) .section-mark { letter-spacing: 0.12em; }
/* =========================================================
* 02 SITE HEADER
* Sticky, quiet, low-chrome. The logo mark gently rotates
* on brand hover — the only invitation in the header bar.
* ========================================================= */
.site-header {
position: sticky;
top: 0;
z-index: 100;
background: rgba(251, 247, 236, 0.78);
backdrop-filter: saturate(160%) blur(14px);
-webkit-backdrop-filter: saturate(160%) blur(14px);
border-bottom: 1px solid transparent;
transition:
background var(--dur) var(--ease),
border-color var(--dur) var(--ease),
box-shadow var(--dur) var(--ease);
}
.site-header.is-scrolled {
background: rgba(251, 247, 236, 0.94);
border-bottom-color: var(--rule-soft);
box-shadow: 0 14px 30px -28px rgba(0,42,61,.35);
}
.site-header__inner {
max-width: var(--shell-max);
margin: 0 auto;
padding: 0.85rem var(--shell-pad);
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
position: relative;
}
/* ----- Brand ----- */
.brand {
display: inline-flex;
align-items: center;
gap: 0.7rem;
color: var(--ink);
background-image: none;
}
.brand:hover { color: var(--ink); background-image: none; }
.brand__mark {
display: inline-flex;
width: 34px;
height: 34px;
align-items: center;
justify-content: center;
transition: transform var(--dur-slow) var(--ease-spring);
}
.brand:hover .brand__mark {
transform: rotate(-7deg) scale(1.08);
}
.brand__mark img {
width: 34px;
height: 34px;
object-fit: contain;
}
.brand__type {
display: flex;
flex-direction: column;
gap: 0.06rem;
line-height: 1.15;
min-width: 0;
}
.brand__type-main {
font-family: var(--font-jp-serif);
font-weight: 900;
font-size: 0.92rem;
letter-spacing: 0.02em;
color: var(--ink);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
:lang(en) .brand__type-main {
font-family: var(--font-display);
font-variation-settings: "opsz" 14, "SOFT" 30;
font-weight: 800;
letter-spacing: -0.005em;
font-size: 0.9rem;
}
.brand__type-sub {
font-family: var(--font-mono);
font-weight: 500;
font-size: 0.62rem;
letter-spacing: 0.18em;
color: var(--ink-soft);
text-transform: uppercase;
}
/* ----- Nav ----- */
.site-nav {
display: flex;
align-items: center;
gap: 1.4rem;
}
.site-nav__list {
display: flex;
align-items: center;
gap: 1.1rem;
margin: 0;
padding: 0;
list-style: none;
}
.site-nav__item {
position: relative;
display: flex;
align-items: center;
}
.site-nav__link {
display: inline-flex;
align-items: center;
line-height: 1;
color: var(--ink);
background-image: none;
font-family: var(--font-sans);
font-size: 0.86rem;
font-weight: 500;
letter-spacing: 0.01em;
padding: 0.35rem 0;
position: relative;
transition: color var(--dur) var(--ease);
}
:lang(ja) .site-nav__link {
font-family: var(--font-jp);
font-weight: 600;
font-size: 0.85rem;
}
.site-nav__link::after {
content: "";
position: absolute;
left: 50%;
bottom: -2px;
width: 0;
height: 2px;
background: var(--leaf);
border-radius: 2px;
transition: width var(--dur) var(--ease), left var(--dur) var(--ease);
}
.site-nav__link:hover {
color: var(--leaf-2);
background-image: none;
}
.site-nav__link:hover::after {
width: 100%;
left: 0;
}
.site-nav__item.is-active .site-nav__link {
color: var(--leaf-2);
}
.site-nav__item.is-active .site-nav__link::after {
width: 100%;
left: 0;
}
/* ----- Dropdown groups ----- */
.site-nav__item--group { position: relative; }
.site-nav__group-btn {
display: inline-flex;
align-items: center;
line-height: 1;
gap: 0.32rem;
border: 0;
background: transparent;
color: var(--ink);
font-family: var(--font-sans);
font-size: 0.86rem;
font-weight: 500;
letter-spacing: 0.01em;
padding: 0.35rem 0;
position: relative;
cursor: pointer;
transition: color var(--dur) var(--ease);
}
:lang(ja) .site-nav__group-btn {
font-family: var(--font-jp);
font-weight: 600;
font-size: 0.85rem;
}
.site-nav__group-btn::after {
content: "";
position: absolute;
left: 50%;
bottom: -2px;
width: 0;
height: 2px;
background: var(--leaf);
border-radius: 2px;
transition: width var(--dur) var(--ease), left var(--dur) var(--ease);
}
.site-nav__item--group:hover .site-nav__group-btn,
.site-nav__item--group:focus-within .site-nav__group-btn,
.site-nav__item--group.is-active .site-nav__group-btn { color: var(--leaf-2); }
.site-nav__item--group.is-active .site-nav__group-btn::after { width: 100%; left: 0; }
.site-nav__caret {
width: 8px;
height: 8px;
border-right: 1.6px solid currentColor;
border-bottom: 1.6px solid currentColor;
transform: translateY(-2px) rotate(45deg);
transition: transform var(--dur) var(--ease);
opacity: 0.7;
}
.site-nav__item--group:hover .site-nav__caret,
.site-nav__item--group:focus-within .site-nav__caret,
.site-nav__item--group.is-open .site-nav__caret {
transform: translateY(0) rotate(225deg);
}
.site-nav__submenu {
position: absolute;
top: calc(100% + 10px);
left: 50%;
transform: translateX(-50%) translateY(6px);
min-width: 190px;
list-style: none;
margin: 0;
padding: 0.4rem;
background: var(--paper-3);
border: 1px solid var(--rule-soft);
border-radius: 14px;
box-shadow: var(--shadow-2);
opacity: 0;
visibility: hidden;
transition: opacity var(--dur) var(--ease),
transform var(--dur) var(--ease),
visibility 0s linear var(--dur);
z-index: 60;
}
/* A little hover bridge so the menu doesn't close in the gap. */
.site-nav__submenu::before {
content: "";
position: absolute;
top: -12px;
left: 0;
right: 0;
height: 12px;
}
.site-nav__item--group:hover .site-nav__submenu,
.site-nav__item--group:focus-within .site-nav__submenu,
.site-nav__item--group.is-open .site-nav__submenu {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
transition: opacity var(--dur) var(--ease),
transform var(--dur) var(--ease),
visibility 0s;
}
.site-nav__subitem { margin: 0; }
.site-nav__sublink {
display: block;
padding: 0.55rem 0.8rem;
border-radius: 9px;
color: var(--ink);
background-image: none;
font-family: var(--font-sans);
font-size: 0.86rem;
font-weight: 500;
white-space: nowrap;
transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
:lang(ja) .site-nav__sublink { font-family: var(--font-jp); font-weight: 600; }
.site-nav__sublink:hover {
background: var(--accent-soft);
color: var(--leaf-2);
background-image: none;
}
.site-nav__subitem.is-active .site-nav__sublink {
color: var(--leaf-2);
background: var(--accent-soft);
}
/* ----- Language switch ----- */
.site-nav__lang {
display: inline-flex;
align-items: center;
gap: 0.45rem;
padding-left: 1rem;
margin-left: 0.4rem;
border-left: 1px solid var(--rule-soft);
font-family: var(--font-mono);
font-size: 0.7rem;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.site-nav__lang-btn {
color: var(--ink-mute);
background-image: none;
transition: color var(--dur) var(--ease);
}
.site-nav__lang-btn:hover {
color: var(--leaf-2);
background-image: none;
}
.site-nav__lang-btn.is-active {
color: var(--ink);
font-weight: 600;
}
.site-nav__lang-bullet {
width: 3px;
height: 3px;
border-radius: 50%;
background: var(--ink-mute);
opacity: .6;
}
/* ----- Mobile nav toggle ----- */
.nav-toggle {
display: none;
width: 40px;
height: 40px;
border: 1px solid var(--rule-soft);
border-radius: 10px;
background: transparent;
padding: 0;
position: relative;
transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.nav-toggle:hover { border-color: var(--leaf); background: var(--paper-2); }
.nav-toggle__bar {
position: absolute;
left: 50%;
width: 18px;
height: 1.6px;
background: var(--ink);
border-radius: 2px;
transform: translateX(-50%);
transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.nav-toggle__bar:nth-child(1) { top: 13px; }
.nav-toggle__bar:nth-child(2) { top: 19px; }
.nav-toggle__bar:nth-child(3) { top: 25px; }
.nav-toggle.is-open .nav-toggle__bar:nth-child(1) {
transform: translateX(-50%) translateY(6px) rotate(45deg);
}
.nav-toggle.is-open .nav-toggle__bar:nth-child(2) {
opacity: 0;
}
.nav-toggle.is-open .nav-toggle__bar:nth-child(3) {
transform: translateX(-50%) translateY(-6px) rotate(-45deg);
}
/* =========================================================
* 03 HERO — HOME
* The lab's living mark. The logo arms breathe in and out,
* the bud glows softly, and the title sits below — earned,
* not announced.
* ========================================================= */
.hero--home {
position: relative;
padding: clamp(3.5rem, 7vw, 6rem) 0 clamp(3rem, 5vw, 4.5rem);
overflow: visible;
}
/* Two-column row: mark on the left, copy on the right.
On narrow viewports the two stack with the mark on top. */
.hero__row {
display: grid;
grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.1fr);
align-items: center;
gap: clamp(1.5rem, 5vw, 4rem);
}
.hero__copy {
min-width: 0;
}
/* Wrapper for the hero mark + handwritten bud annotation.
The wrap shrinks to the mark and is right-aligned in the grid column,
so the bud (horizontal centre of the mark) is the wrap's centre too —
which lets us anchor the annotation precisely above the bud. */
.hero__mark-wrap {
position: relative;
justify-self: end;
}
/* A casual, handwritten "少しずつ、育ってる" note sitting ABOVE the bud,
with a curved arrow sweeping down-right to point at the sprout. The note
is anchored to the bud's x (the wrap's centre) and floats above it. */
.hero__bud-note {
position: absolute;
bottom: calc(100% - 36px);
right: 50%;
margin-right: 14px;
display: flex;
align-items: flex-start;
gap: 0.15rem;
font-family: var(--font-hand);
font-size: 1.45rem;
color: var(--leaf-2);
line-height: 1;
white-space: nowrap;
transform: rotate(-3deg);
transform-origin: right bottom;
opacity: 0;
pointer-events: none;
transition: opacity 700ms var(--ease) 1.6s;
}
:lang(ja) .hero__bud-note {
font-family: var(--font-hand), var(--font-jp-serif);
font-size: 1.3rem;
font-weight: 700;
}
.is-loaded .hero__bud-note {
opacity: 0.9;
}
.hero__bud-note-text {
padding-top: 0.25rem;
}
/* Curved arrow sweeping down and to the right toward the bud. */
.hero__bud-note-arrow {
display: inline-block;
width: 50px;
height: 60px;
flex-shrink: 0;
background: center / contain no-repeat url("data:image/svg+xml;utf8,");
}
@media (max-width: 1000px) {
.hero__bud-note {
font-size: 1.2rem;
bottom: calc(100% - 28px);
}
:lang(ja) .hero__bud-note { font-size: 1.1rem; }
.hero__bud-note-arrow { width: 40px; height: 48px; }
}
/* Keep the note visible while stacked; only drop it on very small phones
where it would collide with the centred mark. */
@media (max-width: 460px) {
.hero__bud-note {
font-size: 1rem;
bottom: calc(100% - 18px);
margin-right: 6px;
}
:lang(ja) .hero__bud-note { font-size: 0.92rem; }
.hero__bud-note-arrow { width: 32px; height: 38px; }
}
@media (max-width: 360px) {
.hero__bud-note { display: none; }
}
/* The animated Ψ — a custom svg drawn at hero size.
The viewBox is 0..1000; the bud extends above to negative Y, so
the SVG renders with overflow visible and the container gets
top padding to make visual room. */
.hero__mark {
--lean-x: 0px;
--lean-y: 0px;
--lean-r: 0deg;
position: relative;
width: min(340px, 38vw);
height: min(340px, 38vw);
padding-top: min(80px, 10vw);
box-sizing: content-box;
transform: translate(var(--lean-x), var(--lean-y)) rotate(var(--lean-r));
transition: transform 800ms var(--ease);
}
.hero__mark svg {
width: 100%;
height: 100%;
display: block;
overflow: visible;
}
.hero__mark .m-stem,
.hero__mark .m-cap-top,
.hero__mark .m-cap-bot,
.hero__mark .m-tick-l,
.hero__mark .m-tick-r {
fill: var(--ink-2);
}
/* The bottom-right tick echoes the violet arm — like in the original logo. */
.hero__mark .m-tick-br {
fill: var(--violet);
}
.hero__mark .m-arm-l {
fill: var(--violet);
transform-origin: 500px 542px;
}
.hero__mark .m-arm-r {
fill: var(--sky);
transform-origin: 500px 542px;
}
.hero__mark .m-bud {
transform-box: fill-box;
transform-origin: center bottom;
animation: bud-pulse 4.4s var(--ease) infinite;
}
@keyframes arm-breath-l {
0%, 100% { transform: translate(0,0) rotate(0deg); }
50% { transform: translate(-4px,-2px) rotate(-1.3deg); }
}
@keyframes arm-breath-r {
0%, 100% { transform: translate(0,0) rotate(0deg); }
50% { transform: translate(4px,-2px) rotate(1.3deg); }
}
@keyframes bud-pulse {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.08); opacity: 0.88; }
}
/* Mark entrance — staggered draw-in on load. */
.hero__mark .m-stem,
.hero__mark .m-cap-top,
.hero__mark .m-cap-bot,
.hero__mark .m-tick-l,
.hero__mark .m-tick-r,
.hero__mark .m-tick-bl,
.hero__mark .m-tick-br,
.hero__mark .m-arm-l,
.hero__mark .m-arm-r,
.hero__mark .m-bud {
opacity: 0;
transform-box: fill-box;
animation-fill-mode: both;
}
.is-loaded .hero__mark .m-tick-l { animation: piece-in 700ms var(--ease-spring) 60ms forwards; }
.is-loaded .hero__mark .m-tick-r { animation: piece-in 700ms var(--ease-spring) 120ms forwards; }
.is-loaded .hero__mark .m-tick-bl { animation: piece-in 700ms var(--ease-spring) 180ms forwards; }
.is-loaded .hero__mark .m-tick-br { animation: piece-in 700ms var(--ease-spring) 180ms forwards; }
.is-loaded .hero__mark .m-cap-top { animation: piece-in 700ms var(--ease-spring) 240ms forwards; }
.is-loaded .hero__mark .m-cap-bot { animation: piece-in 700ms var(--ease-spring) 240ms forwards; }
.is-loaded .hero__mark .m-stem { animation: stem-in 900ms var(--ease) 280ms forwards; }
.is-loaded .hero__mark .m-arm-l {
animation: arm-in-l 1000ms var(--ease) 520ms forwards,
arm-breath-l 7s var(--ease) 1.6s infinite;
}
.is-loaded .hero__mark .m-arm-r {
animation: arm-in-r 1000ms var(--ease) 600ms forwards,
arm-breath-r 7s var(--ease) 1.6s infinite;
}
.is-loaded .hero__mark .m-bud {
animation: bud-in 700ms var(--ease-spring) 900ms forwards,
bud-pulse 4.4s var(--ease) 1.8s infinite;
}
@keyframes piece-in {
0% { opacity: 0; transform: translateY(6px) scale(0.94); }
100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes stem-in {
0% { opacity: 0; transform: scaleY(0.4); }
100% { opacity: 1; transform: scaleY(1); }
}
@keyframes arm-in-l {
0% { opacity: 0; transform: translateX(20px) rotate(8deg); }
100% { opacity: 1; transform: translateX(0) rotate(0); }
}
@keyframes arm-in-r {
0% { opacity: 0; transform: translateX(-20px) rotate(-8deg); }
100% { opacity: 1; transform: translateX(0) rotate(0); }
}
@keyframes bud-in {
0% { opacity: 0; transform: translateY(8px) scale(0.6); }
60% { opacity: 1; transform: translateY(-2px) scale(1.15); }
100% { opacity: 1; transform: translateY(0) scale(1); }
}
/* Eyebrow — the small tag above the title. */
.hero__eyebrow {
display: flex;
align-items: center;
gap: 0.7rem;
margin: 0 0 var(--s-3);
font-family: var(--font-mono);
font-size: 0.74rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-soft);
}
.hero__eyebrow-line {
display: inline-block;
width: 32px;
height: 1px;
background: var(--ink-soft);
opacity: 0.6;
flex-shrink: 0;
}
:lang(ja) .hero__eyebrow { letter-spacing: 0.12em; }
.hero--page .hero__eyebrow { justify-content: center; }
/* Display headline — calm, generous. */
.hero__display {
margin: 0 0 var(--s-3);
font-family: var(--font-display);
font-variation-settings: "opsz" 144, "SOFT" 60, "WONK" 1;
font-weight: 800;
font-size: clamp(2.4rem, 5.4vw, 4.6rem);
line-height: 1.04;
letter-spacing: -0.024em;
color: var(--ink);
}
:lang(ja) .hero__display {
font-family: var(--font-jp-serif);
font-weight: 900;
font-size: clamp(2rem, 4.4vw, 3.6rem);
line-height: 1.28;
letter-spacing: 0.005em;
}
.hero__display .hero__line {
display: block;
opacity: 0;
transform: translateY(14px);
transition: opacity 700ms var(--ease), transform 700ms var(--ease);
}
.is-loaded .hero__display .hero__line { opacity: 1; transform: translateY(0); }
.is-loaded .hero__display .hero__line:nth-child(1) { transition-delay: 1100ms; }
.is-loaded .hero__display .hero__line:nth-child(2) { transition-delay: 1240ms; }
.is-loaded .hero__display .hero__line:nth-child(3) { transition-delay: 1380ms; }
.hero__display .hero__word-mark {
background: linear-gradient(120deg, var(--violet-2), var(--sky-2));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.hero__display .hero__period {
color: var(--leaf);
}
/* Subtitle. */
.hero__subtitle {
margin: var(--s-3) 0 0;
max-width: 44ch;
font-size: 1.04rem;
line-height: 1.8;
color: var(--ink-soft);
opacity: 0;
transform: translateY(10px);
transition: opacity 600ms var(--ease) 1500ms, transform 600ms var(--ease) 1500ms;
}
.is-loaded .hero__subtitle { opacity: 1; transform: translateY(0); }
:lang(ja) .hero__subtitle {
font-family: var(--font-jp);
font-size: 0.98rem;
max-width: 28em;
}
.hero__subtitle em {
color: var(--violet-2);
}
/* Hero CTA strip — brush-underline links. */
.hero__links {
display: inline-flex;
align-items: center;
gap: 1.4rem;
margin-top: var(--s-4);
opacity: 0;
transform: translateY(10px);
transition: opacity 600ms var(--ease) 1650ms, transform 600ms var(--ease) 1650ms;
}
.is-loaded .hero__links { opacity: 1; transform: translateY(0); }
.hero__links-divider {
width: 1px;
height: 18px;
background: var(--rule-soft);
}
.hero__scrollcue {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.45rem;
width: max-content;
margin: var(--s-5) auto 0;
color: var(--ink-mute);
background-image: none;
cursor: pointer;
opacity: 0;
transform: translateY(10px);
transition: opacity 600ms var(--ease) 1900ms,
transform 600ms var(--ease) 1900ms,
color var(--dur) var(--ease);
}
.is-loaded .hero__scrollcue {
opacity: 1;
transform: translateY(0);
}
/* The scroll cue is the hero's call-to-action: highlight it on hover. */
.hero__scrollcue:hover {
color: var(--leaf-2);
background-image: none;
}
/* The scroll cue only makes sense when the hero fits the viewport (desktop).
On narrower screens the hero is taller than the viewport, so the cue would
sit below the fold — hide it there and let the content flow naturally. */
@media (max-width: 1100px) {
.hero__scrollcue { display: none; }
}
.hero__scrollcue-line {
display: block;
width: 1.5px;
height: 32px;
background: linear-gradient(to bottom, transparent, currentColor);
border-radius: 1px;
animation: cue-fall 2.2s var(--ease) infinite;
}
.hero__scrollcue-label {
font-family: var(--font-mono);
font-size: 0.66rem;
letter-spacing: 0.18em;
text-transform: uppercase;
}
@keyframes cue-fall {
0% { transform: translateY(-6px); opacity: 0; }
35% { opacity: 1; }
100% { transform: translateY(10px); opacity: 0; }
}
/* =========================================================
* 04 HERO — PAGE
* ========================================================= */
.hero--page {
padding: clamp(3rem, 6vw, 4.5rem) 0 clamp(1.5rem, 3vw, 2.5rem);
text-align: center;
border-bottom: 1px solid var(--rule-fine);
margin-bottom: var(--s-6);
position: relative;
}
.hero--page::before {
content: "";
position: absolute;
left: 50%;
bottom: -1px;
transform: translateX(-50%);
width: 28px;
height: 28px;
background: center / contain no-repeat url("data:image/svg+xml;utf8,");
background-color: var(--paper);
}
.hero__title {
font-family: var(--font-display);
font-variation-settings: "opsz" 144, "SOFT" 60, "WONK" 1;
font-size: clamp(2.2rem, 4.5vw, 3.4rem);
font-weight: 800;
line-height: 1.1;
letter-spacing: -0.018em;
color: var(--ink);
margin: 0;
}
:lang(ja) .hero__title {
font-family: var(--font-jp-serif);
font-weight: 900;
letter-spacing: 0.005em;
}
.hero__title-dot { color: var(--leaf); }
.hero__page-subtitle {
margin: var(--s-3) auto 0;
max-width: 56ch;
color: var(--ink-soft);
font-size: 1rem;
}
.hero-banner {
max-width: min(560px, 80%);
height: auto;
margin: 0 auto;
display: block;
}
/* =========================================================
* 05 HOME § INTRO + NEWS
* Lab statement on the left, dispatch column on the right.
* ========================================================= */
.home-section {
padding-top: var(--s-5);
position: relative;
scroll-margin-top: var(--header-h);
}
.home-intro__grid {
display: grid;
grid-template-columns: 1.15fr 1fr;
gap: clamp(2rem, 5vw, 4.5rem);
align-items: start;
}
.home-intro__lede {
position: relative;
}
.home-intro__title {
font-family: var(--font-display);
font-variation-settings: "opsz" 144, "SOFT" 80, "WONK" 1;
font-weight: 700;
font-style: italic;
font-size: clamp(1.6rem, 3vw, 2.3rem);
line-height: 1.25;
color: var(--ink);
margin: 0 0 var(--s-3);
position: relative;
}
:lang(ja) .home-intro__title {
font-family: var(--font-jp-serif);
font-style: normal;
font-weight: 900;
font-size: clamp(1.4rem, 2.6vw, 1.9rem);
line-height: 1.5;
}
.home-intro__quote {
font-family: var(--font-display);
font-variation-settings: "opsz" 144;
color: var(--violet);
font-size: 1.4em;
line-height: 0;
vertical-align: -0.18em;
margin: 0 0.06em;
}
.home-intro__body {
color: var(--ink);
font-size: 1rem;
line-height: 1.85;
}
.home-intro__body p { margin-bottom: 1em; }
.home-intro__body a {
color: var(--leaf-2);
background-image: linear-gradient(currentColor, currentColor);
background-size: 100% 1px;
}
.home-intro__body a:hover { background-size: 100% 2px; }
/* Dispatch column. */
.home-news {
position: relative;
padding: var(--s-3) var(--s-4) var(--s-4);
background: var(--paper-3);
border-radius: 18px;
border: 1px solid var(--rule-fine);
box-shadow: var(--shadow-1);
}
.home-news::before {
content: "";
position: absolute;
top: -14px;
left: 28px;
width: 28px;
height: 28px;
background: center / contain no-repeat url("data:image/svg+xml;utf8,");
}
.home-news__title {
font-family: var(--font-display);
font-variation-settings: "opsz" 14, "SOFT" 30;
font-size: 1.3rem;
font-weight: 700;
line-height: 1.2;
color: var(--ink);
margin: 0 0 var(--s-3);
}
:lang(ja) .home-news__title {
font-family: var(--font-jp-serif);
font-weight: 900;
font-size: 1.1rem;
}
.home-news__kicker {
display: block;
font-family: var(--font-mono);
font-size: 0.66rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-mute);
margin-bottom: 0.45rem;
}
.news-list {
list-style: none;
margin: 0;
padding: 0;
}
.news-list__item {
border-top: 1px dashed var(--rule-soft);
}
.news-list__item:last-child { border-bottom: 1px dashed var(--rule-soft); }
.news-list__link {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 0.9rem;
padding: 0.9rem 0;
color: var(--ink);
background-image: none;
transition: color var(--dur) var(--ease), padding-left var(--dur) var(--ease);
}
.news-list__link:hover {
color: var(--leaf-2);
background-image: none;
padding-left: 0.4rem;
}
.news-list__idx {
font-family: var(--font-mono);
font-size: 0.7rem;
color: var(--ink-mute);
letter-spacing: 0.1em;
}
.news-list__body {
display: flex;
flex-direction: column;
gap: 0.2rem;
}
.news-list__date {
font-family: var(--font-mono);
font-size: 0.7rem;
color: var(--ink-mute);
letter-spacing: 0.04em;
}
.news-list__title {
font-size: 0.94rem;
line-height: 1.5;
}
:lang(ja) .news-list__title { font-size: 0.92rem; }
.news-list__arrow {
font-family: var(--font-mono);
font-size: 1rem;
color: var(--ink-mute);
transition: transform var(--dur) var(--ease), color var(--dur) var(--ease);
}
.news-list__link:hover .news-list__arrow {
transform: translateX(4px);
color: var(--leaf-2);
}
.home-news__more {
display: inline-flex;
align-items: center;
gap: 0.4rem;
margin-top: var(--s-3);
font-family: var(--font-mono);
font-size: 0.78rem;
letter-spacing: 0.04em;
color: var(--ink);
background-image: none;
}
.home-news__more:hover { color: var(--leaf-2); background-image: none; }
.home-news__more:hover span[aria-hidden] { transform: translateX(4px); }
.home-news__more span[aria-hidden] {
transition: transform var(--dur) var(--ease);
}
/* =========================================================
* 06 HOME § PROJECTS
* Four research projects, paired by color.
* CHUNK/CLOVER lean violet; OCEAN/CCS lean sky.
* ========================================================= */
/* Editorial two-column masthead: the head spans the FULL section width (same
--shell-max as the card grid below, so its left/right edges meet the cards'),
with the big heading on the left and the lede in a narrower right column.
The heading gets the lion's share (7/4) so the JA text stays on 1–2 clean
lines instead of cramming into ~480px and breaking mid-word. The lede column
is capped so body text never stretches to an uncomfortable measure on wide
screens. Lede sits on the heading's baseline (align-items: end). */
/* Head spans the full section/card width: it is a direct sibling of the card
grid inside the same --shell-max .home-section, so dropping the width cap
makes the head's left/right edges meet the cards' edges (kills the lopsided
look). The readable-measure cap lives on the lede only (see below). */
.home-projects__head,
.home-content__head {
max-width: none;
margin: 0 0 var(--s-5);
}
.home-h2 {
font-family: var(--font-display);
font-variation-settings: "opsz" 144, "SOFT" 60, "WONK" 1;
font-size: clamp(1.8rem, 3.6vw, 2.6rem);
font-weight: 800;
line-height: 1.18;
color: var(--ink);
margin: 0 0 var(--s-3);
letter-spacing: -0.02em;
/* Even out the Latin (EN) heading lines. Pure progressive enhancement:
older Safari/Firefox ignore it and fall back to normal wrapping, which
at full width is still 1–2 clean lines. Never load-bearing. */
text-wrap: balance;
}
:lang(ja) .home-h2 {
font-family: var(--font-jp-serif);
font-weight: 900;
line-height: 1.45;
letter-spacing: 0.005em;
/* At full width the JA Projects heading keeps its explicit
shape (2
clean lines) and the no-
Content heading sits on 1–2 lines — neither
needs to break mid-clause. line-break: strict refines WHERE CJK may break
WITHOUT forbidding breaks (unlike word-break: keep-all), so the no-
Content run can still wrap to fit narrow viewports instead of overflowing,
while never landing the cramped "…で取 / り組む。" split from the old narrow
column. No JA heading max-width: the cap is on the lede only, so the
heading uses the full head width and never clips a long unbreakable run. */
line-break: strict;
overflow-wrap: anywhere;
}
.home-h2 em {
background: linear-gradient(120deg, var(--violet-2), var(--sky-2));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
font-style: italic;
}
:lang(ja) .home-h2 em {
background-image: none;
color: var(--violet-2);
font-style: normal;
}
.home-h2__lede {
margin: 0;
color: var(--ink-soft);
font-size: 1.02rem;
line-height: 1.85;
}
.project-cards {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.6rem;
}
.project-card {
--tone: var(--violet);
--tone-2: var(--violet-2);
--tone-soft: var(--violet-soft);
position: relative;
padding: var(--s-4) var(--s-4) calc(var(--s-4) + 0.4rem);
background: var(--paper-3);
border: 1px solid var(--rule-fine);
border-radius: 18px;
overflow: hidden;
transition:
transform var(--dur-slow) var(--ease-spring),
box-shadow var(--dur) var(--ease),
border-color var(--dur) var(--ease);
}
/* Tones cycle every 4 cards (4n+k) so the palette holds for any project count,
not just the current four. Positions 1–4 are unchanged. */
.project-card:nth-child(4n+1) { --tone: var(--violet); --tone-2: var(--violet-2); --tone-soft: var(--violet-soft); }
.project-card:nth-child(4n+2) { --tone: var(--sky); --tone-2: var(--sky-2); --tone-soft: var(--sky-soft); }
.project-card:nth-child(4n+3) { --tone: var(--sky); --tone-2: var(--sky-2); --tone-soft: var(--sky-soft); }
.project-card:nth-child(4n+4) { --tone: var(--violet); --tone-2: var(--violet-2); --tone-soft: var(--violet-soft); }
.project-card::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(120% 60% at 0% 0%, var(--tone-soft), transparent 60%);
opacity: 0.5;
transition: opacity var(--dur) var(--ease);
pointer-events: none;
}
.project-card::after {
/* The curve "leaf" — the tone's arm from the logo, in the corner. */
content: "";
position: absolute;
right: -34px;
bottom: -34px;
width: 160px;
height: 160px;
background: center / contain no-repeat;
background-image:
radial-gradient(closest-side, var(--tone) 35%, transparent 36%);
opacity: 0.10;
transition: transform var(--dur-slow) var(--ease), opacity var(--dur) var(--ease);
pointer-events: none;
}
.project-card:hover {
transform: translateY(-6px);
box-shadow: var(--shadow-2);
border-color: var(--tone-soft);
}
.project-card:hover::before { opacity: 0.85; }
.project-card:hover::after { transform: translate(-8px, -8px) rotate(-4deg); opacity: 0.18; }
.project-card__theme {
display: inline-block;
font-family: var(--font-mono);
font-size: 0.68rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--tone-2);
margin: 0 0 var(--s-2);
padding: 0.25rem 0.7rem;
border: 1px solid var(--tone-soft);
border-radius: 999px;
background: rgba(255,255,255,0.7);
}
:lang(ja) .project-card__theme { letter-spacing: 0.06em; font-size: 0.72rem; }
.project-card__name {
margin: 0 0 var(--s-2);
font-family: var(--font-display);
font-variation-settings: "opsz" 144, "SOFT" 50, "WONK" 1;
font-weight: 900;
font-size: clamp(1.6rem, 2.6vw, 2rem);
letter-spacing: -0.01em;
line-height: 1.1;
color: var(--ink);
}
:lang(ja) .project-card__name { font-family: var(--font-jp-serif); }
.project-card__period { color: var(--tone); }
.project-card__body {
margin: 0;
color: var(--ink-soft);
font-size: 0.94rem;
line-height: 1.75;
max-width: 36em;
position: relative;
z-index: 1;
}
:lang(ja) .project-card__body { font-size: 0.92rem; }
/* =========================================================
* 07 HOME § STATS
* Four numerals. Big, calm.
* ========================================================= */
.paper-stats-card-link {
display: block;
color: var(--ink);
background-image: none;
padding: var(--s-4) 0 0;
border-top: 1px solid var(--rule-soft);
border-bottom: 1px solid var(--rule-soft);
position: relative;
transition: padding-left var(--dur) var(--ease);
}
.paper-stats-card-link:hover {
color: var(--ink);
background-image: none;
}
.paper-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: clamp(1rem, 3vw, 2.5rem);
margin: 0;
padding: 0;
list-style: none;
}
.paper-stats__item {
display: flex;
flex-direction: column;
gap: 0.45rem;
text-align: left;
}
.paper-stats__num {
font-family: var(--font-display);
font-variation-settings: "opsz" 144, "SOFT" 30, "WONK" 1;
font-weight: 800;
font-size: clamp(2.6rem, 6vw, 4.6rem);
line-height: 0.95;
color: var(--ink);
letter-spacing: -0.04em;
transition: color var(--dur) var(--ease), transform var(--dur) var(--ease-spring);
}
.paper-stats__rule {
display: block;
height: 1.5px;
width: 38px;
background: var(--leaf);
border-radius: 1px;
transition: width var(--dur) var(--ease);
}
.paper-stats__key {
font-family: var(--font-mono);
font-size: 0.74rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ink-soft);
}
:lang(ja) .paper-stats__key { letter-spacing: 0.08em; font-size: 0.78rem; }
.paper-stats-card-link:hover .paper-stats__num { color: var(--leaf-2); }
.paper-stats-card-link:hover .paper-stats__rule { width: 64px; }
.paper-stats-card-link__cta {
display: flex;
justify-content: flex-end;
align-items: center;
gap: 0.4rem;
padding: var(--s-2) 0;
margin-top: var(--s-3);
font-family: var(--font-mono);
font-size: 0.74rem;
letter-spacing: 0.04em;
color: var(--ink-soft);
}
.paper-stats-card-link:hover .paper-stats-card-link__cta {
color: var(--leaf-2);
}
.paper-stats-card-link:hover .paper-stats-card-link__cta span[aria-hidden] {
transform: translateX(4px);
}
.paper-stats-card-link__cta span[aria-hidden] {
transition: transform var(--dur) var(--ease);
}
/* =========================================================
* 08 HOME § CONTENT CARDS
* Postcard-style cards for the lab's open content.
* ========================================================= */
/* .home-content__head layout is defined alongside .home-projects__head in the
PROJECTS section (the full-width section head) so both stay identical. */
.content-cards {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
}
.content-card {
--tone: var(--leaf);
--tone-2: var(--leaf-2);
--tone-soft: var(--leaf-soft);
position: relative;
display: grid;
grid-template-columns: auto 1fr;
grid-template-rows: auto auto auto;
gap: 0.4rem 1.2rem;
padding: var(--s-4);
background: var(--paper-3);
border: 1px solid var(--rule-fine);
border-radius: 18px;
color: var(--ink);
background-image: none;
overflow: hidden;
transition:
transform var(--dur-slow) var(--ease-spring),
box-shadow var(--dur) var(--ease),
border-color var(--dur) var(--ease);
}
/* Each card carries one accent from the logo palette so the grid reads as
distinct things, not a wall of green. Tones cycle every 4 cards (4n+k) so
the palette holds for any number of content resources. */
.content-card:nth-child(4n+1) { --tone: var(--leaf); --tone-2: var(--leaf-2); --tone-soft: var(--leaf-soft); }
.content-card:nth-child(4n+2) { --tone: var(--sky); --tone-2: var(--sky-2); --tone-soft: var(--sky-soft); }
.content-card:nth-child(4n+3) { --tone: var(--violet); --tone-2: var(--violet-2); --tone-soft: var(--violet-soft); }
.content-card:nth-child(4n+4) { --tone: var(--sun); --tone-2: var(--sun-2); --tone-soft: rgba(217,155,28,.16); }
.content-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 3px;
width: 60px;
background: var(--tone);
border-radius: 0 0 3px 0;
transition: width var(--dur-slow) var(--ease);
}
.content-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-2);
border-color: var(--tone-soft);
color: var(--ink);
background-image: none;
}
.content-card:hover::before { width: 100%; }
.content-card__tag {
grid-column: 2;
grid-row: 1;
font-family: var(--font-mono);
font-size: 0.68rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--tone-2);
margin: 0;
}
:lang(ja) .content-card__tag { letter-spacing: 0.06em; font-size: 0.72rem; }
.content-card__icon {
grid-column: 1;
grid-row: 1 / span 3;
width: 52px;
height: 52px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 14px;
background: var(--tone-soft);
color: var(--tone-2);
font-size: 1.2rem;
transition: transform var(--dur) var(--ease-spring), background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.content-card:hover .content-card__icon {
transform: rotate(-6deg) scale(1.05);
background: var(--tone);
color: #fff;
}
.content-card__title {
grid-column: 2;
grid-row: 2;
font-family: var(--font-display);
font-variation-settings: "opsz" 144, "SOFT" 50, "WONK" 1;
font-size: 1.18rem;
font-weight: 800;
line-height: 1.25;
color: var(--ink);
margin: 0;
letter-spacing: -0.01em;
}
:lang(ja) .content-card__title {
font-family: var(--font-jp-serif);
font-weight: 900;
font-size: 1.1rem;
line-height: 1.4;
}
.content-card__desc {
grid-column: 2;
grid-row: 3;
font-size: 0.92rem;
color: var(--ink-soft);
line-height: 1.7;
margin: 0.35rem 0 0;
}
:lang(ja) .content-card__desc { font-size: 0.9rem; }
.content-card__foot {
grid-column: 1 / -1;
grid-row: 4;
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
padding-top: var(--s-3);
margin-top: var(--s-2);
border-top: 1px dashed var(--rule-soft);
}
.content-card__url {
font-family: var(--font-mono);
font-size: 0.72rem;
color: var(--ink-mute);
letter-spacing: 0.02em;
}
.content-card__arrow {
font-family: var(--font-mono);
font-size: 1rem;
color: var(--ink-mute);
transition: transform var(--dur) var(--ease), color var(--dur) var(--ease);
}
.content-card:hover .content-card__arrow {
transform: translate(3px, -3px);
color: var(--tone-2);
}
/* =========================================================
* 09 HOME § CTA
* One large, warm invitation.
* ========================================================= */
.home-cta {
padding-top: var(--s-6);
padding-bottom: var(--s-5);
}
.cta-card {
--spot-x: 50%;
--spot-y: 0%;
position: relative;
padding: clamp(2rem, 5vw, 3.5rem);
border-radius: 24px;
background:
radial-gradient(ellipse 80% 90% at 100% 0%, rgba(76,149,188,.18), transparent 60%),
radial-gradient(ellipse 80% 90% at 0% 100%, rgba(94,66,173,.16), transparent 60%),
var(--paper-3);
border: 1px solid var(--rule-soft);
text-align: center;
overflow: hidden;
box-shadow: var(--shadow-1);
transition: box-shadow var(--dur) var(--ease);
}
.cta-card.is-hot {
box-shadow: var(--shadow-2);
}
/* The spotlight that follows the cursor on hover. */
.cta-card::after {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(420px circle at var(--spot-x) var(--spot-y),
rgba(31,138,94,0.14),
transparent 65%);
opacity: 0;
transition: opacity var(--dur) var(--ease);
pointer-events: none;
}
.cta-card.is-hot::after { opacity: 1; }
.cta-card::before {
/* The two arms of the logo, faint and large, framing the CTA. */
content: "";
position: absolute;
inset: 0;
background: center / 80% no-repeat url("data:image/svg+xml;utf8,");
pointer-events: none;
}
.cta-card__kicker {
display: inline-block;
font-family: var(--font-mono);
font-size: 0.7rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--leaf-2);
padding: 0.3rem 0.9rem;
border: 1px solid var(--accent-soft);
border-radius: 999px;
background: var(--accent-soft);
margin-bottom: var(--s-3);
position: relative;
}
.cta-card__title {
font-family: var(--font-display);
font-variation-settings: "opsz" 144, "SOFT" 60, "WONK" 1;
font-size: clamp(2rem, 4.5vw, 3.2rem);
font-weight: 800;
line-height: 1.15;
letter-spacing: -0.02em;
color: var(--ink);
margin: 0 0 var(--s-3);
position: relative;
}
:lang(ja) .cta-card__title {
font-family: var(--font-jp-serif);
font-weight: 900;
font-size: clamp(1.7rem, 4vw, 2.6rem);
line-height: 1.5;
}
.cta-card__period { color: var(--leaf); }
.cta-card__body {
max-width: 54ch;
margin: 0 auto var(--s-4);
color: var(--ink-soft);
font-size: 1rem;
line-height: 1.85;
position: relative;
}
.cta-card__btn {
display: inline-flex;
align-items: center;
gap: 0.6rem;
padding: 0.95rem 1.6rem;
background: var(--ink);
color: var(--paper);
border-radius: 999px;
font-family: var(--font-sans);
font-weight: 600;
font-size: 0.95rem;
letter-spacing: 0.01em;
background-image: none;
box-shadow: 0 8px 20px -10px rgba(0,42,61,.5);
transition:
transform var(--dur) var(--ease-spring),
box-shadow var(--dur) var(--ease),
background var(--dur) var(--ease);
position: relative;
}
:lang(ja) .cta-card__btn {
font-family: var(--font-jp);
font-weight: 700;
}
.cta-card__btn:hover {
transform: translateY(-3px);
background: var(--leaf-2);
color: var(--paper);
background-image: none;
box-shadow: 0 12px 28px -10px rgba(18,106,69,.55);
}
.cta-card__btn:hover .cta-card__arrow {
transform: translateX(4px);
}
.cta-card__arrow {
transition: transform var(--dur) var(--ease);
}
.cta-card--compact {
padding: clamp(1.5rem, 3vw, 2.2rem);
}
.cta-card--compact .cta-card__title { font-size: clamp(1.4rem, 2.8vw, 2rem); }
/* =========================================================
* 10 PAGE LISTS — news / post indexes
* ========================================================= */
.page-list { margin-top: var(--s-4); }
.page-list__head {
text-align: center;
margin-bottom: var(--s-5);
}
.page-list__kicker {
font-family: var(--font-mono);
font-size: 0.76rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ink-soft);
margin: 0 0 0.4rem;
}
.page-list__title {
font-size: clamp(2rem, 4vw, 2.8rem);
margin: 0;
}
.page-list__body {
max-width: 60ch;
margin: 0 auto var(--s-5);
}
.post-index {
list-style: none;
padding: 0;
margin: 0;
}
.post-index__item {
border-top: 1px solid var(--rule-soft);
}
.post-index__item:last-child { border-bottom: 1px solid var(--rule-soft); }
.post-index__link {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 1rem;
padding: 1.1rem 0;
color: var(--ink);
background-image: none;
transition: padding-left var(--dur) var(--ease), color var(--dur) var(--ease);
}
.post-index__link:hover {
color: var(--leaf-2);
padding-left: 0.6rem;
background-image: none;
}
.post-index__idx {
font-family: var(--font-mono);
font-size: 0.78rem;
color: var(--ink-mute);
letter-spacing: 0.06em;
}
.post-index__body {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.post-index__date {
font-family: var(--font-mono);
font-size: 0.76rem;
color: var(--ink-mute);
}
.post-index__title {
font-size: 1.04rem;
line-height: 1.45;
font-weight: 500;
}
:lang(ja) .post-index__title { font-size: 0.98rem; }
.post-index__arrow {
font-family: var(--font-mono);
font-size: 1.05rem;
color: var(--ink-mute);
transition: transform var(--dur) var(--ease), color var(--dur) var(--ease);
}
.post-index__link:hover .post-index__arrow {
transform: translateX(4px);
color: var(--leaf-2);
}
/* =========================================================
* 11 PAGE SINGLE — prose pages
* ========================================================= */
.page-single,
.page-list,
.page-members,
.page-papers,
.member-profile {
margin: 0 auto;
}
.page-single__meta {
margin: 0 auto var(--s-3);
max-width: var(--prose-max);
text-align: center;
font-family: var(--font-mono);
font-size: 0.78rem;
color: var(--ink-soft);
letter-spacing: 0.04em;
}
.tldr {
max-width: var(--prose-max);
margin: 0 auto var(--s-4);
padding: var(--s-3) var(--s-4);
background:
radial-gradient(ellipse 70% 100% at 0% 0%, var(--leaf-soft), transparent 60%),
var(--paper-3);
border: 1px solid var(--accent-soft);
border-radius: 14px;
position: relative;
}
.tldr__label {
font-family: var(--font-mono);
font-size: 0.72rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--leaf-2);
display: block;
margin-bottom: 0.4rem;
}
.tldr p { margin: 0; color: var(--ink); }
.toc {
max-width: var(--prose-max);
margin: 0 auto var(--s-4);
padding: var(--s-3) var(--s-4);
background: var(--paper-2);
border: 1px solid var(--rule-fine);
border-radius: 14px;
}
.toc__title {
margin: 0 0 var(--s-2);
font-size: 0.9rem;
font-family: var(--font-mono);
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--ink-soft);
}
.toc ul {
list-style: none;
padding-left: 1rem;
border-left: 2px solid var(--accent-soft);
}
.toc a {
background-image: none;
color: var(--ink);
font-size: 0.94rem;
}
.toc a:hover { color: var(--leaf-2); background-image: none; }
.prose {
max-width: var(--prose-max);
margin: 0 auto;
font-size: 1.02rem;
line-height: 1.75;
}
.prose li { line-height: 1.7; }
.prose h2 {
margin-top: var(--s-5);
font-size: clamp(1.5rem, 2.6vw, 1.9rem);
border-bottom: 1px solid var(--rule-soft);
padding-bottom: 0.4rem;
}
.prose h3 {
margin-top: var(--s-4);
font-size: clamp(1.2rem, 2vw, 1.4rem);
color: var(--ink-2);
}
/* Heading marker — Font Awesome solid "seedling", tying headings to the
lab's growth identity (same glyph as the section marker). */
.prose h3::before {
content: "\f4d8";
font-family: "Font Awesome 6 Free";
font-weight: 900;
font-size: 0.82em;
margin-right: 0.5em;
vertical-align: 0.04em;
color: var(--leaf);
-webkit-font-smoothing: antialiased;
}
.prose blockquote {
margin: 1.6em 0;
max-width: 100%;
}
.prose a {
color: var(--leaf-2);
background-image: linear-gradient(currentColor, currentColor);
background-size: 100% 1px;
}
.prose a:hover { background-size: 100% 2px; }
/* Card components rendered inside prose (via shortcodes like content-cards
on /content/ or project-cards on /research/) are elements, so the
prose underline above would otherwise tile a 1px line into a solid fill.
Higher specificity (.prose .content-card) cancels it. */
.prose .content-card {
color: var(--ink);
background: var(--paper-3);
background-image: none;
}
.prose .content-card:hover { background-image: none; }
.about-logo {
text-align: center;
margin: var(--s-2) 0 var(--s-5);
}
.about-logo img { max-width: min(420px, 80%); }
.about-tagline {
font-family: var(--font-display);
font-variation-settings: "opsz" 14, "SOFT" 30;
font-style: italic;
font-size: 1.04rem;
line-height: 1.55;
color: var(--ink-2);
margin: 0.6rem 0 0;
}
.about-tagline-ja {
font-family: var(--font-jp-serif);
font-weight: 700;
font-size: 1rem;
color: var(--ink-soft);
margin: 0.3rem 0 0;
}
.post-tags {
max-width: var(--prose-max);
margin: var(--s-4) auto 0;
padding-top: var(--s-3);
border-top: 1px dashed var(--rule-soft);
}
.tags {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.tags a {
font-family: var(--font-mono);
font-size: 0.78rem;
padding: 0.3rem 0.7rem;
border: 1px solid var(--rule-soft);
border-radius: 999px;
background-image: none;
color: var(--ink-soft);
}
.tags a:hover {
background: var(--accent-soft);
color: var(--leaf-2);
border-color: var(--accent-soft);
background-image: none;
}
/* =========================================================
* 12 MEMBERS
* ========================================================= */
.page-members { margin-top: var(--s-2); }
.members-section { margin-bottom: var(--s-6); }
.members-section__head {
display: flex;
align-items: baseline;
gap: 0.9rem;
margin-bottom: var(--s-3);
padding-bottom: 0.6rem;
border-bottom: 1px solid var(--rule-soft);
}
.members-section__title {
margin: 0;
font-size: clamp(1.2rem, 2vw, 1.5rem);
font-family: var(--font-display);
font-variation-settings: "opsz" 14, "SOFT" 30;
font-weight: 800;
}
:lang(ja) .members-section__title {
font-family: var(--font-jp-serif);
font-weight: 900;
}
.members-section__count {
font-family: var(--font-mono);
font-size: 0.75rem;
color: var(--ink-mute);
padding: 0.15rem 0.55rem;
background: var(--paper-2);
border-radius: 999px;
}
.members-section--collapsible > summary {
cursor: pointer;
list-style: none;
display: flex;
align-items: baseline;
gap: 0.9rem;
margin-bottom: var(--s-3);
padding-bottom: 0.6rem;
border-bottom: 1px solid var(--rule-soft);
transition: opacity var(--dur) var(--ease);
}
.members-section--collapsible > summary::-webkit-details-marker { display: none; }
.members-section--collapsible > summary:hover .members-section__title { color: var(--leaf-2); }
/* A clearly-visible toggle: a circular chip with a Font Awesome chevron. */
.members-section__chevron {
margin-left: auto;
align-self: center;
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.8rem;
height: 1.8rem;
border-radius: 50%;
background: var(--paper-2);
border: 1px solid var(--rule-soft);
color: var(--leaf-2);
font-family: "Font Awesome 6 Free";
font-weight: 900;
font-size: 0.75rem;
transition: transform var(--dur) var(--ease),
background var(--dur) var(--ease),
border-color var(--dur) var(--ease);
}
.members-section__chevron::before { content: "\f078"; }
.members-section--collapsible > summary:hover .members-section__chevron {
background: var(--accent-soft);
border-color: var(--leaf);
}
.members-section--collapsible[open] .members-section__chevron {
transform: rotate(180deg);
}
.members-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1.1rem;
}
.member-card {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 1.1rem;
padding: 1.25rem 1.4rem;
background: var(--paper-3);
border: 1px solid var(--rule-fine);
border-radius: 16px;
color: var(--ink);
background-image: none;
transition:
transform var(--dur) var(--ease-spring),
box-shadow var(--dur) var(--ease),
border-color var(--dur) var(--ease);
}
.member-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-2);
border-color: var(--accent-soft);
color: var(--ink);
background-image: none;
}
.member-card__photo {
width: 64px;
height: 64px;
border-radius: 50%;
overflow: hidden;
flex-shrink: 0;
background: linear-gradient(135deg, var(--sky-soft), var(--violet-soft));
display: flex;
align-items: center;
justify-content: center;
}
.member-card__photo img {
width: 100%;
height: 100%;
object-fit: cover;
}
.member-card__photo-placeholder {
font-family: var(--font-display);
font-weight: 800;
font-size: 1.5rem;
color: var(--violet-2);
}
.member-card__body {
display: flex;
flex-direction: column;
gap: 0.25rem;
min-width: 0;
}
.member-card__name {
font-weight: 700;
font-size: 1.08rem;
line-height: 1.3;
color: var(--ink);
overflow-wrap: anywhere;
}
:lang(en) .member-card__name {
font-family: var(--font-display);
font-variation-settings: "opsz" 14, "SOFT" 30;
font-weight: 700;
}
.member-card__role {
font-family: var(--font-mono);
font-size: 0.74rem;
color: var(--ink-mute);
letter-spacing: 0.03em;
line-height: 1.45;
}
.member-card__arrow {
color: var(--ink-mute);
font-size: 1.05rem;
transition: transform var(--dur) var(--ease), color var(--dur) var(--ease);
}
.member-card:hover .member-card__arrow {
transform: translateX(3px);
color: var(--leaf-2);
}
.members-empty {
text-align: center;
color: var(--ink-mute);
padding: var(--s-5) 0;
}
.members-join-cta { margin-top: var(--s-6); }
/* Member profile (single). */
.member-profile {
max-width: 820px;
}
.member-profile__head {
display: flex;
align-items: center;
gap: var(--s-4);
margin-bottom: var(--s-4);
}
.member-profile__photo {
flex-shrink: 0;
width: 120px;
height: 120px;
border-radius: 50%;
overflow: hidden;
background: linear-gradient(135deg, var(--sky-soft), var(--violet-soft));
}
.member-profile__photo img {
width: 100%;
height: 100%;
object-fit: cover;
}
.member-profile__kicker {
font-family: var(--font-mono);
font-size: 0.72rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ink-soft);
margin: 0 0 0.4rem;
}
.member-profile__name {
font-size: clamp(1.8rem, 3.4vw, 2.4rem);
margin: 0;
}
.member-profile__role {
font-family: var(--font-mono);
font-size: 0.86rem;
color: var(--leaf-2);
margin: 0.3rem 0 0;
}
.member-profile__affiliation {
color: var(--ink-soft);
font-size: 0.95rem;
margin: 0.2rem 0 0;
}
.member-profile__rule {
width: 60px;
height: 2px;
background: var(--leaf);
border-radius: 1px;
margin: var(--s-4) 0;
}
.member-profile__content { max-width: 100%; }
.member-profile__links {
margin-top: var(--s-4);
padding-top: var(--s-3);
border-top: 1px dashed var(--rule-soft);
}
.member-profile__links-title {
font-family: var(--font-mono);
font-size: 0.74rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ink-soft);
margin: 0 0 var(--s-2);
}
.link-pills {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
list-style: none;
padding: 0;
margin: 0;
}
.link-pills a {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.35rem 0.85rem;
background: var(--paper-2);
border: 1px solid var(--rule-soft);
border-radius: 999px;
font-size: 0.86rem;
color: var(--ink);
background-image: none;
transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.link-pills a:hover {
background: var(--accent-soft);
border-color: var(--accent-soft);
color: var(--leaf-2);
background-image: none;
}
.member-profile__back {
margin-top: var(--s-5);
padding-top: var(--s-3);
border-top: 1px solid var(--rule-soft);
}
.member-profile__back a {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-family: var(--font-mono);
font-size: 0.84rem;
background-image: none;
}
.member-profile__back a:hover {
color: var(--leaf-2);
background-image: none;
}
/* =========================================================
* 13 PAPERS
* ========================================================= */
.page-papers { padding-top: 0; }
.page-papers__stats {
margin-bottom: var(--s-6);
padding-bottom: var(--s-4);
border-bottom: 1px solid var(--rule-soft);
}
.papers-section {
margin-bottom: var(--s-6);
}
.papers-section__title {
font-size: clamp(1.6rem, 2.6vw, 2rem);
margin: 0 0 var(--s-4);
color: var(--ink);
border-left: 4px solid var(--leaf);
padding-left: 0.7rem;
}
.papers-section__period { color: var(--leaf); }
.papers-jump {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-bottom: var(--s-4);
padding: var(--s-2);
background: var(--paper-2);
border-radius: 12px;
}
.papers-jump a {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.35rem 0.85rem;
background: var(--paper-3);
border: 1px solid var(--rule-soft);
border-radius: 999px;
font-size: 0.84rem;
background-image: none;
color: var(--ink);
transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.papers-jump a:hover {
background: var(--accent-soft);
border-color: var(--accent-soft);
color: var(--leaf-2);
background-image: none;
}
.papers-jump__count {
font-family: var(--font-mono);
font-size: 0.74rem;
color: var(--ink-mute);
padding: 0.05rem 0.4rem;
background: var(--paper-2);
border-radius: 999px;
}
.papers-subsection {
margin-bottom: var(--s-4);
}
.papers-subsection__title {
font-family: var(--font-mono);
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--ink-soft);
margin: 0 0 var(--s-3);
}
.papers-list {
list-style: none;
padding: 0;
margin: 0;
counter-reset: paper-counter;
}
.papers-list__item {
position: relative;
padding: 0.95rem 0 0.95rem 3rem;
border-bottom: 1px solid var(--rule-fine);
font-size: 0.94rem;
line-height: 1.75;
color: var(--ink);
}
.papers-list__item::before {
counter-increment: paper-counter;
content: counter(paper-counter, decimal-leading-zero);
position: absolute;
left: 0;
top: 1rem;
font-family: var(--font-mono);
font-size: 0.72rem;
color: var(--ink-mute);
letter-spacing: 0.06em;
}
.papers-list ol[reversed] { counter-reset: none; }
/* Use the reversed ordering as count source. */
.papers-list[reversed] {
counter-reset: paper-counter;
}
.papers-list__item u {
text-decoration: none;
border-bottom: 2px solid var(--leaf);
padding: 0 0.1em;
}
.papers-list__item b u {
border-color: var(--leaf);
color: var(--ink);
}
.papers-hidden {
display: none;
}
.papers-hidden.papers-visible {
display: block;
animation: paper-in 360ms var(--ease);
}
@keyframes paper-in {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
.papers-toggle-btn {
display: inline-flex;
align-items: center;
gap: 0.4rem;
margin: var(--s-3) 0 0;
padding: 0.55rem 1rem;
background: var(--paper-2);
border: 1px solid var(--rule-soft);
border-radius: 999px;
font-family: var(--font-mono);
font-size: 0.82rem;
color: var(--ink);
transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.papers-toggle-btn:hover {
background: var(--accent-soft);
border-color: var(--accent-soft);
color: var(--leaf-2);
}
/* =========================================================
* 14 BUTTONS & BRUSH LINKS
* ========================================================= */
.brush-link {
position: relative;
display: inline-block;
color: var(--ink);
font-family: var(--font-sans);
font-weight: 600;
font-size: 0.98rem;
padding: 0.25rem 0.1rem;
background-image: linear-gradient(currentColor, currentColor);
background-position: 0 100%;
background-repeat: no-repeat;
background-size: 100% 2px;
transition:
color var(--dur) var(--ease),
background-size var(--dur) var(--ease),
transform var(--dur) var(--ease);
}
:lang(ja) .brush-link {
font-family: var(--font-jp);
font-weight: 700;
}
.brush-link:hover {
color: var(--leaf-2);
background-size: 100% 8px;
background-image: linear-gradient(transparent 70%, var(--accent-soft) 70%);
transform: translateY(-1px);
}
.brush-link--primary {
color: var(--paper);
padding: 0.65rem 1.25rem;
background: var(--ink);
background-image: none;
border-radius: 999px;
transition:
transform var(--dur) var(--ease-spring),
background var(--dur) var(--ease),
box-shadow var(--dur) var(--ease);
}
.brush-link--primary:hover {
color: var(--paper);
background: var(--leaf-2);
background-image: none;
transform: translateY(-2px);
box-shadow: var(--shadow-1);
}
.home-section__more {
margin-top: var(--s-4);
text-align: right;
}
.more-link {
display: inline-flex;
align-items: center;
gap: 0.45rem;
font-family: var(--font-mono);
font-size: 0.82rem;
letter-spacing: 0.04em;
color: var(--ink);
background-image: none;
}
.more-link:hover {
color: var(--leaf-2);
background-image: none;
}
.more-link:hover span[aria-hidden] { transform: translateX(4px); }
.more-link span[aria-hidden] {
transition: transform var(--dur) var(--ease);
}
/* ----- CTA shortcode: button + click-to-copy chips -----
These regained their styling here after the redesign (the old rules were
dropped); the JS handlers live in site.js (setupEmailCopy / setupClickCopy).
The copy chips read as "tap to copy" via a mono pill + a copy glyph. */
/* The address + subject-prefix copy chips. Scoped so .cta-button.email-copy
(the big-button variant) is unaffected. */
.click-copy,
.email-copy:not(.cta-button) {
display: inline-flex;
align-items: center;
gap: 0.4em;
padding: 0.12em 0.55em;
border-radius: 8px;
background: var(--paper-2);
border: 1px solid var(--rule-soft);
color: var(--leaf-2);
font-family: var(--font-mono);
font-size: 0.9em;
line-height: 1.5;
cursor: pointer;
vertical-align: baseline;
transition: background var(--dur) var(--ease),
border-color var(--dur) var(--ease),
box-shadow var(--dur) var(--ease),
transform var(--dur-fast) var(--ease-spring);
}
.click-copy::before,
.email-copy:not(.cta-button)::before {
content: "\f0c5"; /* Font Awesome solid "copy" */
font-family: "Font Awesome 6 Free";
font-weight: 900;
font-size: 0.85em;
color: var(--leaf);
opacity: 0.85;
}
.click-copy:hover,
.email-copy:not(.cta-button):hover {
background: var(--accent-soft);
border-color: var(--leaf);
box-shadow: var(--shadow-1);
}
.click-copy:active,
.email-copy:not(.cta-button):active {
transform: translateY(1px);
}
.cta-email { margin: var(--s-2) 0; }
/* The CTA button variant (rendered when a button_link is given). */
.cta-button {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.85rem 1.5rem;
background: var(--ink);
color: var(--paper);
border: 0;
border-radius: 999px;
font-family: var(--font-sans);
font-weight: 600;
font-size: 0.95rem;
cursor: pointer;
background-image: none;
box-shadow: 0 8px 20px -10px rgba(0, 42, 61, .5);
transition: transform var(--dur) var(--ease-spring),
background var(--dur) var(--ease),
box-shadow var(--dur) var(--ease);
}
:lang(ja) .cta-button { font-family: var(--font-jp); font-weight: 700; }
.cta-button:hover {
transform: translateY(-3px);
background: var(--leaf-2);
color: var(--paper);
background-image: none;
box-shadow: 0 12px 28px -10px rgba(18, 106, 69, .55);
}
/* =========================================================
* 15 SITE FOOTER
* ========================================================= */
.site-footer {
margin-top: var(--s-7);
padding: var(--s-4) 0;
border-top: 1px solid var(--rule-soft);
}
.site-footer__inner {
max-width: var(--shell-max);
margin: 0 auto;
padding: 0 var(--shell-pad);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s-3);
flex-wrap: wrap;
}
.footer-brand {
display: inline-flex;
align-items: center;
gap: 0.6rem;
color: var(--ink);
background-image: none;
}
.footer-brand:hover { color: var(--ink); background-image: none; }
.footer-brand__mark {
width: 28px;
height: 28px;
}
.footer-brand__main {
display: block;
font-family: var(--font-jp-serif);
font-weight: 900;
font-size: 0.9rem;
line-height: 1.2;
}
:lang(en) .footer-brand__main {
font-family: var(--font-display);
font-variation-settings: "opsz" 14, "SOFT" 30;
font-weight: 800;
font-size: 0.9rem;
}
.footer-brand__sub {
display: block;
font-family: var(--font-mono);
font-size: 0.6rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-soft);
}
.footer-social {
list-style: none;
padding: 0;
margin: 0;
display: flex;
gap: 0.5rem;
}
.footer-social a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 999px;
background: var(--paper-2);
color: var(--ink);
background-image: none;
transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.footer-social a:hover {
background: var(--leaf);
color: var(--paper);
background-image: none;
}
.footer-colophon {
margin: 0;
font-family: var(--font-mono);
font-size: 0.72rem;
color: var(--ink-mute);
letter-spacing: 0.04em;
}
@media (max-width: 600px) {
.site-footer__inner {
flex-direction: column;
align-items: flex-start;
gap: var(--s-2);
}
}
/* =========================================================
* 16 MOTION — reveals + breathing
* ========================================================= */
[data-reveal] {
opacity: 0;
transform: translateY(16px);
transition:
opacity 760ms var(--ease),
transform 760ms var(--ease);
will-change: opacity, transform;
}
[data-reveal].is-revealed {
opacity: 1;
transform: translateY(0);
}
/* For cards inside a revealed container — staggered children. */
[data-reveal] .project-card,
[data-reveal] .content-card,
[data-reveal] .paper-stats__item,
[data-reveal] .news-list__item,
[data-reveal] .member-card,
[data-reveal] .members-grid > * {
opacity: 0;
transform: translateY(12px);
transition:
opacity 600ms var(--ease),
transform 600ms var(--ease);
}
[data-reveal].is-revealed .project-card,
[data-reveal].is-revealed .content-card,
[data-reveal].is-revealed .paper-stats__item,
[data-reveal].is-revealed .news-list__item,
[data-reveal].is-revealed .member-card,
[data-reveal].is-revealed .members-grid > * {
opacity: 1;
transform: translateY(0);
}
[data-reveal].is-revealed .project-card:nth-child(1),
[data-reveal].is-revealed .content-card:nth-child(1),
[data-reveal].is-revealed .paper-stats__item:nth-child(1),
[data-reveal].is-revealed .news-list__item:nth-child(1) { transition-delay: 80ms; }
[data-reveal].is-revealed .project-card:nth-child(2),
[data-reveal].is-revealed .content-card:nth-child(2),
[data-reveal].is-revealed .paper-stats__item:nth-child(2),
[data-reveal].is-revealed .news-list__item:nth-child(2) { transition-delay: 180ms; }
[data-reveal].is-revealed .project-card:nth-child(3),
[data-reveal].is-revealed .content-card:nth-child(3),
[data-reveal].is-revealed .paper-stats__item:nth-child(3),
[data-reveal].is-revealed .news-list__item:nth-child(3) { transition-delay: 280ms; }
[data-reveal].is-revealed .project-card:nth-child(4),
[data-reveal].is-revealed .content-card:nth-child(4),
[data-reveal].is-revealed .paper-stats__item:nth-child(4),
[data-reveal].is-revealed .news-list__item:nth-child(4) { transition-delay: 380ms; }
[data-reveal].is-revealed .news-list__item:nth-child(5) { transition-delay: 460ms; }
[data-reveal].is-revealed .news-list__item:nth-child(6) { transition-delay: 540ms; }
/* =========================================================
* 17 MOBILE
* ========================================================= */
@media (max-width: 920px) {
.home-intro__grid {
grid-template-columns: 1fr;
gap: var(--s-4);
}
.paper-stats { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
.footer-brand__main { font-size: 0.86rem; }
}
/* Below 900px the nav collapses into a hamburger that drops a panel directly
below the header. Rather than a flat gray text list, the panel is rebuilt as
the content-card grid in miniature: the panel itself is real material (the
.cta-card Psi-arm gradient motif — sky top-right, violet bottom-left over
paper-3 + soft navy shadow), Home is a leaf "bud/home" row carrying the Psi
mark, and the four groups (#2..#5) each become a colour-coded zone via
:nth-child — leaf / sky / violet / sun, matching the canonical content-card
order — with a left tone rail, a mono-uppercase kicker, and tone-dot sublinks.
The ACTIVE link/sublink earns the green BUD (the brand's growth signifier)
plus a leaf-soft pill + lift, and active text is ALWAYS green (never the
low-contrast sun tone). Rows fade + slide + scale in with a springy
nth-child stagger when .is-open fires (touch has no hover); the whole
entrance is neutralised under prefers-reduced-motion (block further below). */
@media (max-width: 900px) {
.nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
.site-nav {
position: absolute;
top: calc(100% + 8px);
right: var(--shell-pad);
left: var(--shell-pad);
flex-direction: column;
align-items: stretch;
gap: 0;
/* Material depth: the verbatim .cta-card motif (sky arm top-right,
violet arm bottom-left) over paper — the single biggest lever
against the flat ("のっぺり") look. */
background:
radial-gradient(ellipse 78% 62% at 100% 0%, var(--sky-soft), transparent 62%),
radial-gradient(ellipse 78% 62% at 0% 100%, var(--violet-soft), transparent 62%),
var(--paper-3);
border: 1px solid var(--rule-soft);
border-radius: 16px;
padding: 0.5rem 0.5rem 0.6rem;
box-shadow: var(--shadow-3);
max-height: 0;
overflow: hidden;
opacity: 0;
transform: translateY(-6px);
pointer-events: none;
transition: max-height var(--dur) var(--ease),
opacity var(--dur-fast) var(--ease),
transform var(--dur-fast) var(--ease);
}
.site-nav.is-open {
max-height: calc(100vh - var(--header-h) - 24px);
opacity: 1;
transform: translateY(0);
pointer-events: auto;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.site-nav__list {
flex-direction: column;
align-items: stretch; /* reset desktop's align-items:center */
gap: 0;
width: 100%;
}
/* Each row defaults to the brand leaf tone; groups override by position.
display:block resets the desktop '.site-nav__item{display:flex}' so the
group's kicker + submenu stack vertically (otherwise they'd sit in a row
and the submenu would overflow off the right edge). */
.site-nav__item {
--tone: var(--leaf);
--tone-2: var(--leaf-2);
--tone-soft: var(--leaf-soft);
display: block;
width: 100%;
}
/* ---- Per-group tone, mirroring the content-card :nth-child pattern.
The 5 children are: #1 Home (plain), #2 About, #3 Activity, #4 Team,
#5 Resources (all ). Defensive '.site-nav__list >' combinator so
only the direct group items match — order leaf / sky / violet / sun. ---- */
.site-nav__list > .site-nav__item--group:nth-child(2) { --tone: var(--leaf); --tone-2: var(--leaf-2); --tone-soft: var(--leaf-soft); }
.site-nav__list > .site-nav__item--group:nth-child(3) { --tone: var(--sky); --tone-2: var(--sky-2); --tone-soft: var(--sky-soft); }
.site-nav__list > .site-nav__item--group:nth-child(4) { --tone: var(--violet); --tone-2: var(--violet-2); --tone-soft: var(--violet-soft); }
.site-nav__list > .site-nav__item--group:nth-child(5) { --tone: var(--sun); --tone-2: var(--sun-2); --tone-soft: rgba(217, 155, 28, 0.16); }
/* ---- Home: a single link given a leading Psi bud/home mark. ---- */
.site-nav__link {
position: relative;
display: flex;
align-items: center;
gap: 0.7rem;
padding: 0.95rem 0.9rem;
font-family: var(--font-sans);
font-size: 1rem;
font-weight: 600;
border-radius: 12px;
color: var(--ink);
transition: background var(--dur) var(--ease),
color var(--dur) var(--ease),
box-shadow var(--dur) var(--ease),
transform var(--dur-fast) var(--ease-spring);
}
:lang(ja) .site-nav__link { font-family: var(--font-jp); font-weight: 700; letter-spacing: 0.01em; }
.site-nav__link::after { display: none; }
/* Font Awesome solid "house" for the Home row — conventional and instantly
legible as the home link. */
.site-nav__link::before {
content: "\f015";
font-family: "Font Awesome 6 Free";
font-weight: 900;
flex: 0 0 auto;
width: 1.15rem;
font-size: 0.95rem;
text-align: center;
color: var(--leaf-2);
transition: transform var(--dur) var(--ease-spring);
}
.site-nav__link:hover { background: var(--leaf-soft); color: var(--leaf-2); }
.site-nav__link:active { transform: translateY(1px) scale(0.99); background: var(--paper-deep); }
.site-nav__item.is-active .site-nav__link {
background: var(--leaf-soft);
color: var(--leaf-2);
font-weight: 700;
box-shadow: var(--shadow-1);
}
.site-nav__item.is-active .site-nav__link::before { transform: scale(1.08); }
/* ---- Group becomes a colour-coded zone: a left tone rail + a neutral
mono kicker (kept --ink-mute for contrast; only the rail/markers carry
the tone, so the sun group is never low-contrast body text). ---- */
.site-nav__item--group {
position: relative;
margin-top: 0.45rem;
padding: 0.5rem 0 0.3rem 0.7rem;
border-top: 1px solid var(--rule-fine);
}
/* The left accent rail in the group's tone. */
.site-nav__item--group::before {
content: "";
position: absolute;
left: 0.18rem;
top: 0.7rem;
bottom: 0.45rem;
width: 3px;
border-radius: 3px;
background: var(--tone);
opacity: 0.6;
}
/* The static button -> a mono-uppercase section kicker. */
.site-nav__group-btn {
width: 100%;
justify-content: flex-start;
padding: 0.45rem 0.9rem 0.35rem;
font-family: var(--font-mono);
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--ink-mute);
cursor: default;
pointer-events: none;
}
:lang(ja) .site-nav__group-btn {
font-family: var(--font-mono);
font-size: 0.7rem;
letter-spacing: 0.1em;
}
.site-nav__group-btn::after { display: none; }
.site-nav__caret { display: none; }
/* When this group's section is active, the kicker leans into its tone-2
(always a dark -2 variant -> AA-safe even for sun). */
.site-nav__item--group.is-active .site-nav__group-btn { color: var(--tone-2); }
/* Submenu shown inline (static), indented under the rail. */
.site-nav__submenu,
.site-nav__item--group:hover .site-nav__submenu,
.site-nav__item--group:focus-within .site-nav__submenu,
.site-nav__item--group.is-open .site-nav__submenu {
position: static;
transform: none;
min-width: 0;
padding: 0;
margin: 0.1rem 0 0;
background: transparent;
border: 0;
box-shadow: none;
opacity: 1;
visibility: visible;
transition: none;
}
.site-nav__submenu::before { display: none; }
.site-nav__sublink {
position: relative;
display: flex;
align-items: center;
gap: 0.6rem;
padding: 0.85rem 0.9rem;
font-family: var(--font-sans);
font-size: 1rem;
font-weight: 500;
border-radius: 10px;
color: var(--ink-2);
transition: background var(--dur) var(--ease),
color var(--dur) var(--ease),
transform var(--dur-fast) var(--ease-spring);
}
:lang(ja) .site-nav__sublink { font-family: var(--font-jp); font-weight: 600; }
/* A faint tone dot leads each sublink, tying it to its zone. */
.site-nav__sublink::before {
content: "";
flex: 0 0 auto;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--tone);
opacity: 0.45;
transition: transform var(--dur) var(--ease-spring),
opacity var(--dur) var(--ease);
}
.site-nav__sublink:hover { background: var(--tone-soft); color: var(--tone-2); }
.site-nav__sublink:hover::before { opacity: 0.95; transform: scale(1.25); }
.site-nav__sublink:active { transform: translateX(1px); background: var(--paper-deep); }
/* Active sublink -> green leaf pill + the green BUD dot with a soft halo
(active text is ALWAYS leaf, never the per-group tone, so contrast is
safe regardless of zone). */
.site-nav__subitem.is-active .site-nav__sublink {
background: var(--leaf-soft);
color: var(--leaf-2);
font-weight: 700;
}
.site-nav__subitem.is-active .site-nav__sublink::before {
width: 9px;
height: 9px;
background: var(--leaf);
opacity: 1;
box-shadow: 0 0 0 3px var(--leaf-soft);
}
/* ---- Language switch: a segmented pill (paper-2 track, paper-3 active
thumb, leaf text), enlarged so each segment clears ~44px on touch. ---- */
.site-nav__lang {
margin: 0.6rem 0.1rem 0.1rem;
padding: 0.28rem;
display: inline-flex;
align-self: flex-start;
align-items: stretch;
gap: 0.2rem;
border: 0;
border-left: 0;
border-radius: 999px;
background: var(--paper-2);
box-shadow: inset 0 0 0 1px var(--rule-fine);
font-family: var(--font-mono);
font-size: 0.72rem;
letter-spacing: 0.1em;
text-transform: uppercase;
justify-content: flex-start;
}
.site-nav__lang-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.7rem 1rem;
border-radius: 999px;
color: var(--ink-mute);
background-image: none;
transition: color var(--dur-fast) var(--ease),
background var(--dur-fast) var(--ease),
box-shadow var(--dur-fast) var(--ease);
}
.site-nav__lang-btn:hover { color: var(--leaf-2); background-image: none; }
.site-nav__lang-btn.is-active {
color: var(--leaf-2);
font-weight: 700;
background: var(--paper-3);
box-shadow: var(--shadow-1);
}
/* The bullet separator is meaningless inside a pill — hide it. */
.site-nav__lang-bullet { display: none; }
/* ---- Staggered entrance: rows fade + slide + scale in on .is-open.
The hidden start state lives ONLY in the keyframe (via 'both'), so if
the animation is ever suppressed the rows are never stranded invisible.
Springy easing echoes the hero piece-in load. ---- */
.site-nav.is-open .site-nav__item,
.site-nav.is-open .site-nav__lang {
animation: nav-row-in var(--dur) var(--ease-spring) both;
}
.site-nav.is-open .site-nav__list > .site-nav__item:nth-child(1) { animation-delay: 40ms; }
.site-nav.is-open .site-nav__list > .site-nav__item:nth-child(2) { animation-delay: 90ms; }
.site-nav.is-open .site-nav__list > .site-nav__item:nth-child(3) { animation-delay: 140ms; }
.site-nav.is-open .site-nav__list > .site-nav__item:nth-child(4) { animation-delay: 190ms; }
.site-nav.is-open .site-nav__list > .site-nav__item:nth-child(5) { animation-delay: 240ms; }
.site-nav.is-open .site-nav__lang { animation-delay: 300ms; }
}
/* Neutralise the mobile-nav entrance under reduced-motion. Width-AND-feature
scoped so it can never reach the desktop nav, and it cancels only the
entrance animation + the springy marker transforms (desktop hover-colour
transitions are untouched). */
@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
.site-nav.is-open .site-nav__item,
.site-nav.is-open .site-nav__lang {
animation: none;
}
.site-nav__link,
.site-nav__link::before,
.site-nav__sublink,
.site-nav__sublink::before {
transition: none;
transform: none;
}
}
/* Staggered row entrance for the mobile nav panel (echoes the hero piece-in).
The hidden state lives here so rows are never stranded invisible elsewhere. */
@keyframes nav-row-in {
0% { opacity: 0; transform: translateY(8px) scale(0.985); }
100% { opacity: 1; transform: translateY(0) scale(1); }
}
/* At/below 900px (same point the nav collapses) the hero row stacks:
mark on top, copy below, all centered. The annotation stays above the
bud. Keeping the breakpoint aligned avoids a cramped half-and-half zone. */
@media (max-width: 900px) {
.hero__row {
grid-template-columns: 1fr;
justify-items: center;
text-align: center;
gap: var(--s-3);
}
.hero__mark-wrap { justify-self: center; }
.hero__mark {
width: min(240px, 52vw);
height: min(240px, 52vw);
padding-top: min(70px, 14vw);
}
.hero__copy { max-width: 34rem; }
.hero__eyebrow { justify-content: center; }
.hero__subtitle { margin-left: auto; margin-right: auto; }
.hero__links { justify-content: center; }
}
/* Below 760px more layout stacks. */
@media (max-width: 760px) {
.project-cards, .content-cards {
grid-template-columns: 1fr;
}
.paper-stats { grid-template-columns: repeat(2, 1fr); }
.home-section { padding-top: var(--s-4); }
main.content > section + section,
main.content > article + section,
main.content > section + article { margin-top: var(--s-6); }
.site-footer__grid {
grid-template-columns: 1fr;
gap: var(--s-3);
}
.hero--home {
padding: var(--s-4) 0 var(--s-5);
}
.members-grid { grid-template-columns: 1fr 1fr; }
.member-profile__head {
flex-direction: column;
text-align: center;
}
.home-section__more { text-align: left; }
}
@media (max-width: 480px) {
.members-grid { grid-template-columns: 1fr; }
.paper-stats { grid-template-columns: 1fr 1fr; }
.news-list__link { grid-template-columns: auto 1fr; }
.news-list__arrow { display: none; }
.brand__type-sub { display: none; }
}
/* =========================================================
* EXTRA — small decorations & easter-egg playfulness
* ========================================================= */
/* The illust shortcode (from theme) gets a gentle hover. */
.illust img,
[class*="illust"] img {
transition: transform var(--dur-slow) var(--ease-spring);
}
.illust:hover img,
[class*="illust"]:hover img {
transform: rotate(-3deg) scale(1.04);
}
/* Footnote backrefs in markdown — clean look. */
.footnote-ref,
.footnote-backref {
font-family: var(--font-mono);
font-size: 0.78em;
background-image: none;
color: var(--leaf-2);
}
.footnote-ref:hover,
.footnote-backref:hover { color: var(--leaf-2); background-image: none; }
/* Focus styles — keyboard accessibility. */
:focus-visible {
outline: 2px solid var(--leaf);
outline-offset: 3px;
border-radius: 4px;
}
a:focus-visible,
button:focus-visible {
outline: 2px solid var(--leaf);
outline-offset: 3px;
}
/* The CTA arrow doesn't want a transitioned arrow style on focus */
.cta-card__btn:focus-visible {
outline-offset: 4px;
}
/* When the user wants reduced motion, freeze the breathing logo. */
@media (prefers-reduced-motion: reduce) {
.hero__mark .m-arm-l,
.hero__mark .m-arm-r,
.hero__mark .m-bud,
.hero__scrollcue-line {
animation: none !important;
}
}
/* The footnote section. */
.footnotes {
max-width: var(--prose-max);
margin: var(--s-5) auto 0;
padding-top: var(--s-3);
border-top: 1px dashed var(--rule-soft);
font-size: 0.86rem;
color: var(--ink-soft);
}
.footnotes hr { display: none; }
.footnotes p { margin: 0.3em 0; }
/* About logo image (overrides default border-radius). */
.about-logo img {
box-shadow: none;
border-radius: 0;
}
/* =========================================================
* Illustration shortcode — float right/left, small/inline.
* ========================================================= */
.section-illust {
display: block;
margin: 0.4rem 0 1rem;
}
.section-illust img {
display: block;
max-width: 100%;
box-shadow: none;
border-radius: 0;
opacity: 0.9;
transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.section-illust:hover img {
opacity: 1;
transform: rotate(-2deg) scale(1.03);
}
.section-illust--small img,
.section-illust--small {
max-width: 160px;
}
.section-illust--inline {
display: inline-block;
vertical-align: middle;
margin: 0 0.5em;
}
.section-illust--inline img {
max-width: 28px;
height: auto;
}
.section-illust--right {
float: right;
margin: 0 0 1rem 1.2rem;
}
.section-illust--left {
float: left;
margin: 0 1.2rem 1rem 0;
}
@media (max-width: 680px) {
.section-illust--right,
.section-illust--left {
float: none;
margin: 1rem auto;
max-width: 140px;
}
.section-illust--small { max-width: 140px; }
}
/* Footnotes inside the intro card — quieter, smaller. */
.home-intro__body .footnotes {
margin-top: var(--s-3);
padding-top: var(--s-2);
font-size: 0.78rem;
color: var(--ink-mute);
line-height: 1.6;
}
.home-intro__body .footnotes ol { padding-left: 1.2em; }
.home-intro__body .footnotes p { margin: 0.2em 0; }
/* The home_section_title curly quotes — fine, but a touch smaller. */
.home-intro__quote {
font-size: 1.2em;
color: var(--violet);
opacity: 0.7;
}