/* ------------------------------------------------------------
   さや アーティストページ 共通スタイル
   構成と文字組みの手本：bykatiemai.com（数値は 2026-11-14 に実測）
   決まりは ../DESIGN.md を参照
------------------------------------------------------------ */
:root {
  --paper: #ffffff;
  --ink: #000000;
  --heading: #1d1d1d;
  --text: rgba(0, 0, 0, 0.6);       /* 本文の灰色 */
  --nav: rgba(0, 0, 0, 0.7);
  --rule: rgba(29, 29, 29, 0.3);    /* 文字リンクの下線 */
  --red: #c5220c;                   /* 絵から拾った赤。丸ボタンの文字とホバーだけに使う */

  --font: "Poppins", "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", system-ui, sans-serif;

  --page: 1310px;                   /* トップのカード2枚の幅 */
  --column: 862px;                  /* Work・Calendar の絵の列 */
  --narrow: 638px;                  /* About・Contact の列（302px × 2 ＋ 間34px） */
  --gap: 34px;
  --side: 65px;                     /* 画面の左右の余白 */
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }
html.is-locked { overflow: hidden; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  line-height: 2;
  letter-spacing: 0.02em;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, figure { margin: 0; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- 文字の型 ---------- */
.display {                         /* 大見出し：38px・大文字・字間0.11em */
  color: var(--ink);
  font-size: 38px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  text-align: center;
}
.heading {                         /* 中見出し：24px・大文字・字間0.075em */
  color: var(--ink);
  font-size: 24px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.075em;
  text-transform: uppercase;
}
.label {                           /* 小さな大文字：12px・600・字間0.2em */
  color: var(--heading);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.8;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.text-link { border-bottom: 1px solid var(--rule); padding-bottom: 1px; }
.text-link:hover { color: var(--red); border-color: currentColor; }

/* ---------- ヘッダー ---------- */
.site-header {
  position: relative;
  padding: 56px var(--side) 40px;
  text-align: center;
}
.brand { display: inline-flex; align-items: center; gap: 14px; color: var(--ink); line-height: 1; }
.brand__mark { width: auto; height: 62px; }   /* さやさんのひつじ（Happy New Year!! の絵を輪郭で切り抜いたもの） */
.brand__text { display: block; }
.brand__name {
  display: block;
  font-size: 44px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: lowercase;
}
.brand__role {
  display: block;
  margin-top: 10px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}
.site-nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 26px;
  margin-top: 34px;
  color: var(--nav);
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.site-nav a { padding: 7px 0; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -1px 0 currentColor; }
.site-header__aside {
  position: absolute;
  top: 50%;
  right: var(--side);
  transform: translateY(-50%);
  color: var(--nav);
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.site-header__aside:hover { color: var(--red); }

/* ---------- トップ：大きな絵 ----------
   横幅いっぱいに置く。絵の上下の白い余白は枠の外に出して隠し、描いてある所を大きく見せる。
   パソコンの横長の画面では assets/hero.js が枠の高さを決め、絵がページの半分の速さでついてくる
   （参考サイトと同じ動き）。スマホと縦長の画面では動かさない。 */
.hero {
  --art-top: 0.0852;   /* 描いてある範囲の上端 ÷ 絵の幅（149 / 1748） */
  --art-h: 0.5509;     /* 描いてある範囲の高さ ÷ 絵の幅（963 / 1748） */
  --art-shift: 0.0606; /* 描いてある範囲（左右24〜1512px）を真ん中にするため、右へずらす量 ÷ 絵の幅（106 / 1748） */
  --air: 28px;         /* 描いてある範囲の上下に残す白 */
  position: relative;
  overflow: hidden;
  height: var(--hero-h, calc(100vw * var(--art-h) + var(--air) * 2));
  background: var(--paper);          /* もちつきの絵の四辺は白なので、紙と同じ白でつなぐ */
}
.hero img {
  position: absolute;
  top: var(--hero-lift, calc(var(--air) - 100vw * var(--art-top)));
  left: calc(100% * var(--art-shift));   /* 右にはみ出す分は白い余白だけなので、枠で隠す */
  width: 100%;
  max-width: none;
}

/* ---------- トップ：あいさつ ---------- */
/* 参考サイトの紹介部分を測って合わせた：上40px → 写真 → 98px → 大見出し（行の高さ1） → 25px → リンク → 57px
   写真は画面の幅で変わる（12列の2列分。1440幅で190px、1100幅で133px） */
.intro { padding: 40px var(--side) 57px; text-align: center; }
.avatar {
  width: min(190px, calc(100% / 6 - 28px));
  height: auto;
  aspect-ratio: 1;
  margin: 0 auto 98px;
  border-radius: 50%;
  object-fit: cover;
}
.intro .display { line-height: 1; }
.intro__links { margin-top: 25px; }
@media (min-width: 761px) and (max-width: 1024px) {
  .intro { padding-left: 48px; padding-right: 48px; }   /* 参考サイトは この幅で左右48px（898幅で写真105px） */
}

/* ---------- トップ：カード2枚 ---------- */
.cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  max-width: calc(var(--page) + var(--side) * 2);
  margin: 0 auto;
  padding: 0 var(--side) 40px;
}
.card {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 638 / 379;
  overflow: hidden;
  background: var(--ink);
}
.card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease, opacity 0.3s ease;
}
.card::after {                     /* 題名を読みやすくする薄い影 */
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.26);
}
.card__title {
  position: relative;
  z-index: 1;
  color: #ffffff;
  font-size: 27px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-shadow: 0 1px 18px rgba(0, 0, 0, 0.45);
}
.card:hover img { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) { .card img { transition: none; } .card:hover img { transform: none; } }

/* ---------- トップ：お知らせ（文と絵を左右に） ---------- */
.feature {
  display: grid;
  grid-template-columns: 280px 420px;
  justify-content: center;
  align-items: center;
  gap: 48px;
  padding: 104px var(--side);
}
.feature__title {
  color: var(--ink);
  font-size: 34px;
  font-weight: 400;
  line-height: 1.2;
  text-transform: uppercase;
}
.feature__sub {
  margin-top: 8px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.feature__link {
  display: inline-block;
  margin-top: 14px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* ---------- トップ：帯と丸ボタン ---------- */
.band {
  position: relative;
  display: grid;
  place-items: center;
  height: 450px;
  overflow: hidden;
  background: #eda5d6;               /* 2月のカレンダーの桃色（絵が読み込まれる前に見える色） */
}
.band img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pill {
  position: relative;
  display: inline-block;
  padding: 21px 34px;
  border-radius: 300px;
  background: var(--paper);
  color: var(--red);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.pill:hover { background: var(--red); color: var(--paper); }

/* ---------- 中のページ ---------- */
.page { padding: 16px var(--side) 120px; }
.page__title { margin-bottom: 72px; }

/* 絵の列：1行の絵は高さがそろう（--r は 幅÷高さ） */
.gallery { max-width: var(--column); margin: 0 auto; }
.row { display: flex; gap: var(--gap); }
.row + .row { margin-top: var(--gap); }
.row--solo { max-width: 414px; margin-left: auto; margin-right: auto; }
.row--solo .item { flex-grow: 1; }   /* 伸びる量が1未満だと幅いっぱいにならないため */
.item { flex: var(--r) 1 0; min-width: 0; cursor: zoom-in; }
.item img { width: 100%; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08); }   /* 白い地の絵もあるので、ごく薄い線で紙の端を見せる */
.columns figure img { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08); }

/* About・Contact */
.columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  max-width: var(--narrow);
  margin: 0 auto;
  align-items: start;
}
.columns p, .prose p, .feature__sub { line-break: strict; word-break: auto-phrase; }   /* 日本語を文節の切れ目で折り返す（対応ブラウザのみ） */
.columns > div > * + * { margin-top: 22px; }
.columns .heading + p { margin-top: 18px; }
.columns figure + .heading { margin-top: 44px; }
.prose { max-width: var(--narrow); margin: 0 auto; text-align: center; }
.prose p + p { margin-top: 6px; }
.contact-art { width: 190px; margin: 0 auto 56px; }
.contact-list { margin: 44px auto 0; max-width: 360px; text-align: left; }
.contact-list div { display: flex; justify-content: space-between; gap: 24px; padding: 14px 0; border-bottom: 1px solid rgba(0, 0, 0, 0.12); }
.contact-list div:first-child { border-top: 1px solid rgba(0, 0, 0, 0.12); }
.contact-list dt { color: var(--heading); font-size: 12px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; }
.contact-list dd { margin: 0; color: var(--ink); }

/* ---------- フッター ---------- */
.site-footer { padding: 64px var(--side) 56px; text-align: center; }
.socials { display: flex; justify-content: center; gap: 12px; }
.socials a { display: grid; place-items: center; width: 40px; height: 40px; color: var(--ink); }
.socials a:hover { color: var(--red); }
.socials svg { width: 20px; height: 20px; }
.site-footer small { display: block; margin-top: 18px; font-size: 11px; letter-spacing: 0.08em; }

/* ---------- 大きく見る画面 ---------- */
.viewer {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--paper);
  color: var(--ink);
}
.viewer[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.viewer::backdrop { background: var(--paper); }
.viewer__bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 20px var(--side);
}
.viewer__stage {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 0 var(--side);
  touch-action: pan-y;
}
.viewer__stage img { max-width: 100%; max-height: 100%; object-fit: contain; cursor: pointer; }
.viewer__count, .viewer__title { font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; }
.viewer__title { font-weight: 600; }
.viewer__nav { display: flex; gap: 26px; }
.viewer__btn {
  appearance: none;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
}
.viewer__btn:hover { color: var(--red); }

/* ---------- スマホ ---------- */
@media (max-width: 760px) {
  :root { --side: 20px; --gap: 14px; }

  .site-header { padding: 36px var(--side) 24px; }
  .brand__name { font-size: 36px; }
  .site-nav { gap: 2px 16px; margin-top: 24px; font-size: 11px; }
  .site-header__aside { display: none; }

  .hero { --air: 18px; }

  .brand__mark { height: 50px; }
  .brand { gap: 12px; }

  /* スマホの紹介部分も参考サイトどおり：写真は横幅いっぱい、大見出しは32px・字間なし */
  .intro { padding: 57px var(--side) 57px; }
  .avatar { width: 100%; max-width: 420px; margin-bottom: 115px; }
  .intro .display { font-size: 32px; letter-spacing: 0; }
  .intro__links { margin-top: 21px; }
  .display { font-size: 28px; letter-spacing: 0.08em; }

  .cards { grid-template-columns: 1fr; padding-bottom: 24px; }
  .card__title { font-size: 22px; }

  .feature { grid-template-columns: 1fr; gap: 32px; padding: 72px var(--side); text-align: center; }
  .feature__title { font-size: 28px; }

  .band { height: 280px; }

  .page { padding-bottom: 80px; }
  .page__title { margin-bottom: 40px; }

  /* 絵の列はスマホでは2列。横長の絵は2列ぶん */
  .gallery { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); align-items: start; }
  .row { display: contents; }
  .row + .row { margin-top: 0; }
  .item--wide, .item--full-sp { grid-column: span 2; }

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

  .viewer__bar { padding: 16px var(--side); }
}