:root {
  --green: #084121;
  --green-dark: #084121;
  --green-soft: #155a35;
  --font-display: "Barlow Condensed", "Noto Sans JP", sans-serif;
  --font-body: "Noto Sans JP", sans-serif;
}

html,
body,
.page-curtain,
.mobile-menu {
  background-color: #084121;
}

body,
button,
input,
textarea {
  font-family: var(--font-body);
}

h1,
h2,
h3,
.site-brand,
.main-menu,
.mobile-menu a,
.project-slide__placeholder strong,
.project-slide__caption,
.slider-progress,
.slider-hint,
.page-rail h1,
.display-heading,
.lead,
.service-list strong,
.work-filter,
.work-tile h2,
.journal-item h2,
.project-hero h1,
.post-article h1,
.page-curtain__mark {
  font-family: var(--font-display);
}

.page-curtain {
  background: #084121;
}

.page-curtain__mark {
  font-size: clamp(2rem, 5vw, 5.7rem);
  font-weight: 600;
  letter-spacing: .02em;
}

.site-brand a {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.site-brand__role {
  order: -1;
  margin: 0 0 14px;
  color: #fbfcf8;
  font-family: var(--font-display);
  font-size: .86rem;
  font-weight: 500;
  letter-spacing: .13em;
}

.site-brand__name {
  max-width: 4.6ch;
  color: #fbfcf8;
  font-family: var(--font-display);
  font-size: clamp(3.6rem, 4.6vw, 5rem);
  font-weight: 600;
  letter-spacing: .015em;
  line-height: .92;
  overflow-wrap: normal;
}

.site-brand a::after {
  content: "PORTFOLIO SITE\A © 2026";
  display: block;
  width: 235px;
  margin-top: 30px;
  border-bottom: 4px solid #fbfcf8;
  padding-bottom: 12px;
  color: #fbfcf8;
  font-family: var(--font-display);
  font-size: .53rem;
  letter-spacing: .07em;
  line-height: 1.25;
  white-space: pre;
}

.main-menu a {
  color: #fbfcf8;
  font-family: var(--font-display);
  font-size: .94rem;
  font-weight: 500;
  letter-spacing: .17em;
}

.main-menu a[href*="/works/"]::before {
  content: "WEB DESIGN\A UI / UX\A CODING\A OTHERS";
  position: absolute;
  top: 43px;
  left: 0;
  width: 90px;
  color: #fbfcf8;
  font-size: .61rem;
  font-weight: 500;
  letter-spacing: .14em;
  line-height: 1.45;
  white-space: pre;
}

.side-social {
  top: 77px;
  right: 27px;
  gap: 8px;
}

.side-social a {
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 0;
  background: #fbfcf8;
  color: #084121;
  font-family: var(--font-display);
  font-size: .72rem;
  font-weight: 700;
}

.project-slide__caption h2,
.work-tile h2,
.journal-item h2 {
  letter-spacing: .015em;
}

.display-heading,
.project-hero h1,
.post-article h1 {
  font-weight: 600;
  letter-spacing: .005em;
}

.page-rail h1,
.work-filter,
.slider-progress,
.kicker,
.project-meta p,
.project-body__label {
  font-family: var(--font-display);
  letter-spacing: .16em;
}

@media (min-width: 901px) {
  .site-header {
    height: 190px;
  }

  .site-header__inner {
    padding-top: 77px;
  }

  .site-brand {
    top: 120px;
    width: 300px;
  }

  .home-stage {
    min-height: calc(100svh - 190px);
    padding: 66px 0 132px;
  }

  .project-slider__track {
    gap: 54px;
    padding-left: clamp(46px, 3.35vw, 66px);
  }

  .project-slide {
    width: min(900px, 68vw);
    height: min(530px, 50vw);
    max-height: 64vh;
  }

  .slider-controls,
  .slider-hint {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

@media (max-width: 900px) {
  .site-brand__name {
    max-width: none;
    font-size: clamp(2rem, 8vw, 3.2rem);
  }

  .site-brand__role {
    display: none;
  }

  .site-brand a::after,
  .main-menu a[href*="/works/"]::before {
    display: none;
  }
}