:root{
  --bg:#f5f5f2; --fg:#111; --muted:#777; --line:#d8d8d3;
  --pad:clamp(18px,3vw,46px); --serif:Georgia,"Times New Roman",serif;
  --sans:Arial,Helvetica,sans-serif;
}

  *{ box-sizing: border-box; }
  html{ scroll-behavior: smooth; }
  body{
    margin:0;
    background: var(--ink);
    color: var(--bone);
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
  }
  img{ max-width:100%; display:block; }
  a{ color: inherit; text-decoration: none; }
  :focus-visible{ outline: 2px solid var(--mustard); outline-offset: 3px; }

  .mono{ font-family: var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; }

  /* ── Top bar ───────────────────────────── */
  .topbar{
    position: fixed; top:0; left:0; right:0; z-index: 40;
    display:flex; align-items:center; justify-content:space-between;
    padding: 18px var(--edge);
    font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em;
    text-transform: uppercase;
    mix-blend-mode: difference;
    pointer-events:none;
  }
  .topbar a{ pointer-events:auto; }
  .topbar .mark{ font-family: var(--font-display); font-size: 22px; letter-spacing: 0.04em; }

  /* ── Hero ──────────────────────────────── */
  .hero{
    position:relative;
    min-height: 100svh;
    display:flex; flex-direction:column; justify-content:flex-end;
    overflow:hidden;
    border-bottom: 1px solid var(--line);
  }
  .hero-media{ position:absolute; inset:0; }
  .hero-media img{
    width:100%; height:100%; object-fit:cover;
    filter: grayscale(35%) contrast(1.05) brightness(0.7);
  }
  .hero-media::after{
    content:""; position:absolute; inset:0;
    background: linear-gradient(180deg, rgba(18,18,16,0.15) 0%, rgba(18,18,16,0.55) 62%, var(--ink) 100%);
  }

.marquee-wrap{
  position:relative;
  z-index:2;
  overflow:hidden;
  white-space:nowrap;

  padding-top: clamp(90px, 20vh, 220px);

  transform: translateY(-200px);

  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 4%,
    #000 96%,
    transparent 100%
  );

  mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 4%,
    #000 96%,
    transparent 100%
  );
}

.marquee {
  display: flex;
  width: max-content;

  margin: 0;

  font-family: var(--font-display);
  font-size: clamp(40px, 13vw, 190px);
  line-height: 0.9;
  letter-spacing: 0.01em;

  color: var(--bone);
  mix-blend-mode: difference;

  animation: scroll 65s linear infinite;
  will-change: transform;
}

.marquee span {
  flex: 0 0 auto;
  padding-right: 0.5em;
}

/* アウトライン */
.marquee span:nth-child(even) {
  -webkit-text-stroke: 1.5px var(--bone);
  color: transparent;
}

@keyframes scroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .marquee {
    animation: none;
  }
}
  .hero-foot{
    position:relative; z-index:2;
    display:flex; flex-wrap:wrap; gap: 14px 32px;
    align-items:flex-end; justify-content:space-between;
    padding: 28px var(--edge) 34px;
  }
  .hero-tagline{ font-family: var(--font-mono); font-size: clamp(11px,1.6vw,14px); letter-spacing:0.16em; text-transform:uppercase; color: var(--bone); opacity:0.9; }
  .hero-scroll{ font-family: var(--font-mono); font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color: var(--mustard); }

  /* ── Nav row (categories, like tomato's discipline list) ── */
  .catnav{
    border-bottom: 1px solid var(--line);
    padding: 0 var(--edge);
  }
  .catnav ul{
    list-style:none; margin:0; padding:0;
    display:flex; flex-wrap:wrap;
  }
  .catnav li{ border-right: 1px solid var(--line); }
  .catnav li:last-child{ border-right:none; }
  .catnav a{
    display:block;
    padding: 18px 22px;
    font-family: var(--font-mono); font-size: 13px; letter-spacing:0.1em; text-transform:uppercase;
    transition: background 0.2s ease, color 0.2s ease;
  }
  .catnav a:hover{ background: var(--bone); color: var(--ink); }

  /* ── Section shell ─────────────────────── */
  section{ padding: clamp(56px, 9vw, 120px) var(--edge); }
  .section-head{
    display:flex; align-items:baseline; justify-content:space-between; gap:20px;
    margin-bottom: clamp(28px, 5vw, 56px);
    border-bottom: 1px solid var(--line);
    padding-bottom: 18px;
  }
  .section-head h2{
    font-family: var(--font-display); font-weight:400;
    font-size: clamp(30px, 5vw, 56px); letter-spacing:0.02em; margin:0;
  }
  .section-head .count{ font-family: var(--font-mono); font-size:12px; letter-spacing:0.1em; opacity:0.6; }
/* ── Collections index page ───────────────── */
  .page-head{
    padding: clamp(120px, 18vh, 200px) var(--edge) clamp(40px, 6vw, 64px);
    border-bottom: 1px solid var(--line);
  }
  .page-head .eyebrow{ font-family: var(--font-mono); font-size:12px; letter-spacing:0.14em; color: var(--mustard); display:block; margin-bottom:14px; }
  .page-head h1{ font-family: var(--font-display); font-weight:400; font-size: clamp(48px, 10vw, 130px); line-height:0.92; margin:0; }
  .page-head p{ font-family: var(--font-body); font-size: clamp(16px,2vw,20px); max-width:46ch; margin: 22px 0 0; opacity:0.85; }
  .back-home{ font-family: var(--font-mono); font-size:12px; letter-spacing:0.1em; text-transform:uppercase; opacity:0.75; }
  .back-home:hover{ color: var(--mustard); opacity:1; }

  .grid-3{ grid-template-columns: repeat(3, 1fr); }
  @media (max-width: 980px){ .grid-3{ grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 620px){ .grid-3{ grid-template-columns: 1fr; } }

  .status{ font-family: var(--font-mono); font-size:10px; letter-spacing:0.1em; padding:3px 8px; border:1px solid var(--line-soft); border-radius:2px; }
  .status.live{ color: var(--mustard); border-color: var(--mustard); }
  .status.archived{ opacity:0.5; }

  /* ── Artist directory (collections.html) ─────────── */
  .lede{ font-family: var(--font-body); font-size: clamp(15px,1.6vw,18px); max-width:64ch; opacity:0.85; line-height:1.55; margin: -8px 0 clamp(28px,4vw,40px); }

  .artist-card{ background: var(--ink); padding: 24px 26px 28px; }
  .triptych{ display:grid; grid-template-columns: repeat(3, 1fr); gap:4px; margin-bottom:16px; }
  .triptych .frame{ aspect-ratio: 1/1; overflow:hidden; background:#1a1a17; }
  .triptych img{ width:100%; height:100%; object-fit:cover; filter: grayscale(20%); transition: transform 0.5s ease, filter 0.5s ease; }
  .artist-card:hover .triptych img{ transform: scale(1.04); filter: grayscale(0%); }

  .artist-meta{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; }
  .artist-name{ font-family: var(--font-body); font-weight:600; font-size: 20px; margin:0; }
  .artist-name .ja{ font-family: var(--font-body); font-weight:400; font-size:14px; opacity:0.6; margin-left:8px; }
  .artist-tags{ display:flex; gap:8px; margin-top:6px; }
  .pill{ font-family: var(--font-mono); font-size:10px; letter-spacing:0.08em; text-transform:uppercase; padding:3px 9px; border:1px solid var(--line-soft); border-radius:999px; opacity:0.75; }
  .pill.craft{ border-color: var(--indigo); color: #9fb0e0; }
  .artist-profile{ font-family: var(--font-body); font-size:14px; line-height:1.6; opacity:0.7; font-style:italic; margin: 12px 0 0; }

  /* ── Work grid ─────────────────────────── */
  .grid{
    display:grid; gap: 1px;
    background: var(--line);
    grid-template-columns: repeat(2, 1fr);
  }
  @media (max-width: 720px){ .grid{ grid-template-columns: 1fr; } }
  .tile{ background: var(--ink); }
  .tile figure{ margin:0; }
  .tile .frame{ aspect-ratio: 4/5; overflow:hidden; background:#1a1a17; }
  .tile img{ width:100%; height:100%; object-fit:cover; filter: grayscale(20%); transition: transform 0.6s ease, filter 0.6s ease; }
  .tile:hover img{ transform: scale(1.035); filter: grayscale(0%); }
  .tile figcaption{ padding: 16px 18px 22px; }
  .tag{ font-family: var(--font-mono); font-size:11px; letter-spacing:0.1em; color: var(--mustard); }
  .tile h3{ font-family: var(--font-body); font-weight:500; font-size: 22px; margin: 6px 0 0; }
  .tile p{ margin:4px 0 0; font-size:13px; opacity:0.7; }

	/* ── Exhibition band ────────────────────── */
.exhibition{
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:clamp(24px, 6vw, 72px);
  align-items:start;
  border-top:1px solid var(--line);
}

.exhibition-text{
  margin:0;
  padding:0;
}

.exhibition-text p{
  margin:0 0 28px;
}

.exhibition-title{
  margin:0 0 56px;
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(30px, 5vw, 56px);
  line-height:.95;
  letter-spacing:.02em;
}

.exhibition .frame{
  aspect-ratio:3 / 4;
  overflow:hidden;
  background:#1a1a17;
}

.exhibition .frame img{
  width:100%;
  height:100%;
  object-fit:cover;
}

@media (max-width:800px){
  .exhibition{
    grid-template-columns:1fr;
  }
}
  /* ── About band ────────────────────────── */
  .about{
    display:grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(24px, 6vw, 72px);
    align-items:center;
    border-top: 1px solid var(--line);
  }
  @media (max-width: 800px){ .about{ grid-template-columns: 1fr; } }
  .about .frame{ aspect-ratio: 3/4; overflow:hidden; background:#1a1a17; }
  .about img{ width:100%; height:100%; object-fit:cover; filter: grayscale(30%); }
  .about-copy p{
    font-family: var(--font-body); font-weight:400;
    font-size: clamp(18px, 2.4vw, 26px); line-height:1.5;
    margin: 0 0 20px;
  }
  .about-copy p:first-child::first-letter{
    font-family: var(--font-display); font-size: 1.8em; color: var(--mustard);
  }

  /* ── Footer ────────────────────────────── */
  footer{
    border-top: 1px solid var(--line);
    padding: clamp(40px, 6vw, 64px) var(--edge) 40px;
    display:flex; flex-wrap:wrap; justify-content:space-between; gap: 28px;
  }
  footer .mark{ font-family: var(--font-display); font-size: clamp(40px,7vw,80px); letter-spacing:0.01em; }
  .foot-links{ display:flex; flex-direction:column; gap:8px; font-family: var(--font-mono); font-size:13px; letter-spacing:0.06em; text-transform:uppercase; }
  .foot-links a{ opacity:0.85; }
  .foot-links a:hover{ color: var(--mustard); opacity:1; }
  .copyright{ width:100%; margin-top: 24px; font-family: var(--font-mono); font-size:11px; opacity:0.5; letter-spacing:0.08em; }