/*
 * 株式会社四時半 会社サイト。
 * 生成り × 墨の 2 トーン、余白主体、装飾なし。
 * ライト / ダークは役割スワップ（帳・tone の Web と同じ方針）。
 * 書体は帳と同じひぐれゴシック。ページで使う文字だけの subset を
 * font-wrench で書き出して同梱している（生成手順は docs/fonts.md）。
 */

@font-face {
  font-family: "Higure Gothic";
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/HigureGothicSub-Medium.e3903240.woff2") format("woff2");
}

@font-face {
  font-family: "Higure Gothic";
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/HigureGothicSub-Bold.97038681.woff2") format("woff2");
}

/*
 * 文字色は透明度で薄めず、薄めた墨のような実色を置く（暗いインクの印字感）。
 * ライトは main 全体を multiply で紙に刷る。
 * ダークの明るい文字（--ink）だけは例外で、箔押しとして紙の上に載せる。
 */
:root {
  --ground: #faf7f0;
  --paper: url("/assets/paper-light.3ac4a16e.png");
  --ink: #262320;
  --dim: #8b8172;
  --faint: #b5ab98;
  --hairline: rgba(38, 35, 32, 0.16);
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground: #1c1b19;
    --paper: url("/assets/paper-dark.201708bd.png");
    --ink: #e8e3d6;
    /* 中間色は白系のまま暗めに寄せる（黒系で沈ませるのはコントラストがきつすぎた）。
       screen 合成でやや明るく出る分も見込んで暗めに置く */
    --dim: #59534a;
    --faint: #322e29;
    --hairline: rgba(232, 227, 214, 0.16);
  }
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  /* 紙ノイズは tone の紙質シェーダ移植（scripts/build-noise.py）。@2x タイルを半分で敷く */
  background: var(--ground) var(--paper) repeat;
  background-size: 256px 256px;
  color: var(--ink);
  font-family: "Higure Gothic", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 2;
  letter-spacing: 0.06em;
  -webkit-font-smoothing: antialiased;
}

main {
  max-width: 620px;
  margin: 0 auto;
  padding: 20vh 30px 72px;
}

/* 印字感: 文字とヘアラインを紙に multiply で刷る。
   ダークモードは明るい文字が multiply で沈んでしまうため例外（箔押し = 通常合成）。 */
@media (prefers-color-scheme: light) {
  main {
    mix-blend-mode: multiply;
  }
}

/* ダークの中間色（刷り側）は multiply の双対 screen で、紙のムラを文字に透けさせる。
   明るい文字（箔押し）は通常合成のまま。 */
@media (prefers-color-scheme: dark) {
  .works .desc,
  .works .kind,
  .concept,
  footer {
    mix-blend-mode: screen;
  }
}

.wordmark {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 0.35em;
  line-height: 1;
}

.lead {
  margin-top: 56px;
  font-size: 16px;
  line-height: 2.2;
}

.sp {
  display: none;
}

.works {
  margin-top: 104px;
  list-style: none;
}

.works li {
  border-top: 1px solid var(--hairline);
}

.works li:last-child {
  border-bottom: 1px solid var(--hairline);
}

.works a {
  display: flex;
  align-items: baseline;
  gap: 20px;
  padding: 26px 2px;
  color: inherit;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.works a:hover {
  opacity: 0.55;
}

.works .name {
  flex: none;
  width: 9em;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.works .desc {
  flex: 1;
  color: var(--dim);
}

.works .kind {
  flex: none;
  font-size: 11px;
  letter-spacing: 0.3em;
  color: var(--faint);
}

.concept {
  margin-top: 104px;
  color: var(--dim);
  /* 文節（<wbr> と読点）でのみ折り返す。収まらない場合だけ任意位置で折る */
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.concept p + p {
  margin-top: 28px;
}

footer {
  margin-top: 128px;
  padding-top: 20px;
  border-top: 1px solid var(--hairline);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 11px;
  color: var(--faint);
}

footer .latin {
  letter-spacing: 0.25em;
}

@media (max-width: 560px) {
  main {
    padding-top: 14vh;
  }

  .sp {
    display: inline;
  }

  .works a {
    flex-wrap: wrap;
    row-gap: 0;
  }

  .works .name {
    width: 100%;
  }

  .works .desc {
    flex: none;
  }

  .works .kind {
    margin-left: auto;
  }
}