@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500&family=Noto+Sans+JP:wght@400;500&display=swap');


:root{
  --bg:#f3f1eb;
  --text:#111111;
  --muted:#6b6b66;
  --line:#c8c5bd;
  --max:1440px;
}


/* --------------------------------
   BASE
-------------------------------- */

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);

  font-family:Inter,"Noto Sans JP",sans-serif;
  font-weight:400;
  line-height:1.7;
  letter-spacing:.01em;
}

a{
  color:inherit;
  text-decoration:none;
}

img{
  max-width:100%;
  display:block;
}


/* --------------------------------
   HEADER
-------------------------------- */

.site-header{
  position:sticky;
  top:0;
  z-index:20;

  display:grid;
  grid-template-columns:1fr auto auto auto;
  gap:2rem;
  align-items:center;

  padding:18px 28px;

  border-bottom:1px solid var(--line);

  background:rgba(243,241,235,.94);
  backdrop-filter:blur(8px);
}


/* Brand */

.brand{
  display:flex;
  align-items:center;
  flex-shrink:0;
}

.brand img{
  display:block;
  width:auto;
  height:24px;
}


/* Desktop navigation */

.nav{
  display:flex;
  align-items:center;
  gap:1.4rem;

  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.nav a{
  white-space:nowrap;
}

.nav a:hover{
  opacity:.5;
}


/* Mobile Online Shop */

.shop-link-mobile{
  display:none;

  font-size:.75rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  white-space:nowrap;
}

.shop-link-mobile:hover{
  opacity:.5;
}


/* Language */

.lang-toggle{
  border:0;
  background:none;
  padding:0;

  font:inherit;
  font-size:.75rem;
  letter-spacing:.08em;

  cursor:pointer;
}

.lang-toggle:hover{
  opacity:.5;
}


/* --------------------------------
   MAIN
-------------------------------- */

main{
  max-width:var(--max);
  margin:0 auto;
}


/* --------------------------------
   HERO
-------------------------------- */

.hero{
  padding:28px 28px 70px;
}

.hero-image{
  width:100%;
  overflow:hidden;
}

.hero-image img{
  width:100%;
  height:auto;
  display:block;
}

.hero-copy{
  margin-top:14px;
  padding-top:12px;

  border-top:1px solid var(--line);
}

.hero-copy p{
  margin:0;

  color:var(--muted);
  font-size:.73rem;
  line-height:1.6;
  letter-spacing:.04em;
}


/* --------------------------------
   MAIN SECTIONS
-------------------------------- */

.section{
  padding:90px 28px 120px;
  border-top:1px solid var(--line);
}

.section-head{
  display:grid;
  grid-template-columns:80px 1fr;
  align-items:baseline;

  margin-bottom:60px;
}

.section-head h2{
  margin:0;

  font-size:clamp(2.5rem,7vw,7rem);
  font-weight:400;
  line-height:1;
  letter-spacing:-.04em;
}


/* Small metadata */

.kicker,
.work-no,
.small,
.note{
  color:var(--muted);
  font-size:.73rem;
  letter-spacing:.06em;
}


/* --------------------------------
   WORKS
-------------------------------- */

.work{
  display:grid;
  grid-template-columns:minmax(0,1.6fr) minmax(260px,.8fr);
  gap:56px;
  align-items:start;

  margin-bottom:120px;
}

.work.reverse{
  grid-template-columns:minmax(260px,.8fr) minmax(0,1.6fr);
}

.work.reverse .work-image{
  order:2;
}

.work.reverse .work-meta{
  order:1;
}


/* Work image */

.work-image{
  width:100%;
  aspect-ratio:16 / 9;
  overflow:hidden;
}

.work-image img{
  width:100%;
  height:100%;

  object-fit:cover;
  display:block;
}


/* Work metadata */

.work-meta{
  max-width:460px;
  padding-top:4px;
}

.work-meta h3{
  margin:.35rem 0 .45rem;

  font-size:clamp(1.7rem,3vw,3rem);
  font-weight:400;
  line-height:1.2;
  letter-spacing:-.015em;
}

.work-meta .small{
  margin:.35rem 0;
}


/* Work body */

.body-copy{
  margin-top:30px;
  max-width:38em;

  font-size:.92rem;
  font-weight:400;
  line-height:1.9;
  letter-spacing:.015em;
}


/* Credit / acknowledgement */

.credit{
  margin-top:30px;

  color:var(--muted);
  font-size:.78rem;
  line-height:1.85;
}


/* --------------------------------
   OBJECTS
-------------------------------- */

.object-grid{
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(260px,.8fr);
  gap:56px;
  align-items:start;
}

.object-image{
  width:100%;
  aspect-ratio:1 / 1;
  overflow:hidden;
}

.object-image img{
  width:100%;
  height:100%;

  object-fit:cover;
  display:block;
}

.object-meta{
  max-width:460px;
}

.object-grid h3{
  margin:.35rem 0 .2rem;

  font-size:clamp(1.6rem,3vw,3rem);
  font-weight:400;
  line-height:1.15;
  letter-spacing:-.015em;
}

.object-meta .small{
  margin:.35rem 0;
}


/* --------------------------------
   ARCHIVE
-------------------------------- */

.timeline{
  border-top:1px solid var(--line);
}

.timeline-row{
  display:grid;
  grid-template-columns:150px 1fr;
  gap:20px;

  padding:18px 0;

  border-bottom:1px solid var(--line);
}

.year{
  color:var(--muted);
  font-size:.8rem;
}


/* --------------------------------
   INFORMATION
   ABOUT / VISIT / CONTACT
-------------------------------- */

.utility-section{
  padding:72px 28px 80px;

  border-top:1px solid var(--line);
}

.utility-intro{
  max-width:760px;
  margin-bottom:56px;
}

.utility-intro p{
  margin:0;

  color:var(--muted);
  font-size:.9rem;
  line-height:1.7;
}


/* Visit + Contact */

.utility-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:56px;

  max-width:960px;
}

.utility-item{
  padding-top:18px;

  border-top:1px solid var(--line);
}

.utility-title{
  margin:0 0 20px;

  font-size:1rem;
  font-weight:500;
  line-height:1.4;
  letter-spacing:.03em;
}

.utility-copy{
  margin:0 0 18px;
  max-width:32em;

  font-size:.88rem;
  line-height:1.7;
}

.utility-link{
  display:inline-block;

  font-size:1rem;
  line-height:1.5;

  border-bottom:1px solid currentColor;
}

.utility-link:hover{
  opacity:.5;
}

.utility-note{
  margin-top:22px;

  color:var(--muted);
  font-size:.72rem;
  line-height:1.6;
}


/* --------------------------------
   FOOTER
-------------------------------- */

.footer{
  max-width:var(--max);
  margin:0 auto;

  display:flex;
  justify-content:space-between;
  gap:1rem;

  padding:24px 28px 50px;

  border-top:1px solid var(--line);

  color:var(--muted);
  font-size:.72rem;
  letter-spacing:.06em;
}


/* --------------------------------
   MOBILE
-------------------------------- */

@media (max-width:820px){

  /* Header */

  .site-header{
    grid-template-columns:1fr auto auto;
    gap:1.5rem;

    padding:16px 22px;
  }

  /* スマホは当初のロゴサイズを維持 */

  .brand img{
    width:140px;
    height:auto;
  }

  .nav{
    display:none;
  }

  .shop-link-mobile{
    display:block;
    font-size:.75rem;
  }

  .lang-toggle{
    font-size:.75rem;
  }


  /* Hero */

  .hero{
    padding:22px 22px 38px;
  }

  .hero-image{
    height:auto;
  }

  .hero-image img{
    width:100%;
    height:auto;
  }

  .hero-copy{
    margin-top:20px;
    padding-top:14px;
  }

  .hero-copy p{
    font-size:.68rem;
    line-height:1.55;
  }


  /* Main sections */

  .section{
    padding:68px 22px 88px;
  }

  .section-head{
    grid-template-columns:44px 1fr;
    margin-bottom:44px;
  }


  /* Works */

  .work,
  .work.reverse{
    grid-template-columns:1fr;
    gap:30px;

    margin-bottom:86px;
  }

  .work.reverse .work-image,
  .work.reverse .work-meta{
    order:initial;
  }

  .work-image{
    width:100%;
    aspect-ratio:16 / 9;
  }

  .work-meta{
    max-width:none;
  }

  .work-meta h3{
    margin-top:.35rem;

    font-size:1.8rem;
  }

  .body-copy{
    margin-top:28px;

    font-size:.9rem;
    line-height:1.9;
  }

  .credit{
    font-size:.75rem;
  }


  /* Objects */

  .object-grid{
    display:block;
  }

  .object-image{
    width:100%;
    aspect-ratio:auto;
    margin-bottom:32px;
  }

  .object-image img{
    width:100%;
    height:auto;

    object-fit:contain;
  }

  .object-meta{
    width:100%;
    max-width:none;
  }

  .object-grid h3{
    margin:.4rem 0 .6rem;

    font-size:2rem;
    line-height:1.15;
  }


  /* Archive */

  .timeline-row{
    grid-template-columns:80px 1fr;
    gap:14px;
  }


  /* Utility */

  .utility-section{
    padding:56px 22px 64px;
  }

  .utility-intro{
    margin-bottom:42px;
  }

  .utility-intro p{
    font-size:.86rem;
  }

  .utility-grid{
    grid-template-columns:1fr;
    gap:44px;
  }

  .utility-title{
    margin-bottom:16px;
  }

  .utility-copy{
    font-size:.86rem;
  }

  .utility-link{
    font-size:.96rem;
  }


  /* Footer */

  .footer{
    padding:22px 22px 42px;

    flex-direction:column;
  }

}