/*
 * colon（喫茶）。準備中の告知ページ。
 * 情報だけを淡々と置く。装飾は店頭画像（紙・写真・青い長方形を乗算で焼き込み済み）に任せる。
 * 背景は www と同じ紙ノイズを colon の紙色で生成したもの（scripts/build-noise.py）。
 * レイアウトは写真の枠だけで組み、文字の左右は写真の端に揃える。画像の上と右にある
 * 紙の余白（青い長方形のはみ出し）は枠の外へはみ出させ、レイアウトには影響させない。
 */

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

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

:root {
  color-scheme: light;
  --ground: #e5e0d6;
  --paper: url("/assets/paper-colon.239a5aaa.png");
  --ink: #353531;
  --black: #000000;
  /* 青は面と文字で分ける。面（画像の長方形）は scripts/build-colon-image.py の BLUE。
     文字は 13px でも沈まないよう、同じ色相で明度を落とす */
  --blue-fill: #005792;
  --blue-ink: #003c66;
  /* 文字の段落間。行間（line-height 2）に足すわずかな間で、項目の切れ目だけを示す */
  --gap: 2px;
  /* 左揃えの文字（店名・状態・instagram）は写真の左端から少し内側に置く */
  --text-inset: 5px;
  /* 写真の幅。スマホでも左右に余白を残す */
  --column: min(400px, 100% - 96px);
}

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

html {
  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: 13px;
  line-height: 2;
  letter-spacing: 0.08em;
  -webkit-font-smoothing: antialiased;
}

body {
  /* 画像の余白が狭い画面の右端を越えても横スクロールさせない */
  overflow-x: clip;
}

main,
footer {
  width: var(--column);
  margin: 0 auto;
}

/* 文字を紙に刷る。画像は紙ごと焼き込み済みなので重ねない（紙が二重に沈む） */
.info,
.status,
.sns,
footer {
  mix-blend-mode: multiply;
}

.info,
.status,
.sns {
  padding-left: var(--text-inset);
}

main {
  padding-top: 18vh;
}

.visual {
  display: block;
}

/* 画像 = 写真 960 + 右の余白 144、上の余白 128（scripts/build-colon-image.py の
   PHOTO_W / RECT_RIGHT / RECT_TOP）。写真の枠に合わせ、余白は上と右へはみ出させる */
.visual img {
  display: block;
  width: calc(100% * 1104 / 960);
  max-width: none;
  height: auto;
  margin-top: calc(-100% * 128 / 960);
}

.info {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  margin-top: 40px;
}

h1 {
  color: var(--black);
  font-size: inherit;
  font-weight: 700;
}

/* 右列は文字を左揃えにし、左列から少し下げ、右へずらす。
   ずらしは相対配置で行い、行幅（折り返し）やレイアウトには影響させない */
.place {
  position: relative;
  left: 40px;
  margin-top: 20px;
}

address {
  font-style: normal;
}

/* 各まとまりの項目（店名 / 説明、場所 / 建物名 / 住所、instagram / アカウント）の間はすべて --gap */
.info > * > * + *,
.sns > * + * {
  margin-top: var(--gap);
}

address span {
  display: block;
  margin-bottom: var(--gap);
}

/* 場所の見出しと建物名・住所は文字用の青 */
.place {
  color: var(--blue-ink);
}

/* 建物名と住所の2行を地図への1つのリンクにする（行ごとに分かれず、まとめて反応する） */
address a {
  display: block;
}

/* 見出し（場所・instagram）は 11px の太字 */
h2 {
  font-size: 11px;
  font-weight: 700;
}

/* 状態は場所のあとに読むものなので、左列（店名）に揃えて場所の下に置く */
.status {
  margin-top: 20px;
}

.sns {
  margin-top: 40px;
  color: var(--black);
}

.sns a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a {
  color: inherit;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

/* タッチ端末はタップ後もホバーが残り、戻ると薄いままに見えるのでマウスのみ */
@media (hover: hover) {
  a:hover {
    opacity: 0.55;
  }
}

footer {
  padding: 22vh 0 48px;
  text-align: center;
}

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

  .info {
    flex-direction: column;
    gap: 40px;
  }

  /* 縦積みでも右列は写真の右端を基準に置き、そこから右へずらす */
  .place {
    align-self: flex-end;
    left: 20px;
    margin-top: 0;
  }

  .status {
    margin-top: 40px;
  }
}