/* Page layout for the TsunaguAlign one-pager. Tokens come from styles.css. */

html { scroll-behavior: smooth; }
body { font-family: var(--font-body); }

.page { min-height: 100%; background: var(--color-bg); }
.wrap { max-width: 1140px; margin: 0 auto; padding-inline: var(--space-5); }

/* clears the sticky header when jumping to an anchor */
:target { scroll-margin-top: 80px; }

/* — header — */
.site-header {
  position: sticky; top: 0; z-index: 10;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-neutral-300);
}
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4); padding-block: var(--space-3);
}
.site-header__brand { display: flex; align-items: center; }
.site-header__brand img { height: 34px; width: auto; }
.site-nav { display: flex; align-items: center; gap: var(--space-4); font-size: 14px; }
.site-nav .btn { font-size: 14px; }

/* — section headings — */
.section-head {
  display: flex; align-items: baseline; gap: var(--space-3);
  margin-bottom: var(--space-5);
}
.section-head h2 { margin: 0; font-size: 32px; }
.section-num {
  font-family: var(--font-heading);
  font-size: 13px; letter-spacing: .2em; color: var(--color-accent-700);
  white-space: nowrap;
}

/* — hero — */
.hero { padding-block: var(--space-8) var(--space-7); }
.hero__grid {
  display: grid; grid-template-columns: 1.25fr .75fr;
  gap: var(--space-7); align-items: start;
}
.hero__tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); }
.hero__title {
  font-size: clamp(34px, 4.4vw, 58px); line-height: 1.15;
  margin: 0 0 var(--space-4); letter-spacing: .01em;
}
.hero__lead {
  font-size: 18px; line-height: 1.9; max-width: 44ch;
  margin: 0 0 var(--space-5); color: var(--color-neutral-800); text-wrap: pretty;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.hero__card {
  margin: 0; padding: var(--space-5); border: 1px solid var(--color-neutral-400);
  display: flex; flex-direction: column; align-items: center; gap: var(--space-4);
}
.hero__card img { width: 132px; height: auto; }
.hero__card figcaption { text-align: center; margin-top: 0; font-size: inherit; color: inherit; }
.hero__wordmark {
  font-family: var(--font-heading);
  font-size: 24px; letter-spacing: .06em;
}
.hero__kana { font-size: 13px; letter-spacing: .24em; color: var(--color-accent-700); margin-top: 4px; }
.hero__tagline {
  margin-top: var(--space-4); font-size: 14px; line-height: 1.9;
  color: var(--color-neutral-800);
}

/* — services — */
.services { padding-block: var(--space-7); }
.services__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.services .card { padding: var(--space-5); }
.services .card-title { font-size: 20px; }
.services .card-body { line-height: 1.9; }

/* — work (accent field) — */
.work {
  background: var(--color-accent-900); color: var(--color-neutral-100);
  margin-top: var(--space-6);
}
.work .wrap { padding-block: var(--space-8); }
.work .section-head { margin-bottom: var(--space-6); }
.work .section-head h2 { color: var(--color-neutral-100); }
.work .section-num { color: var(--color-accent-300); }
.work__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.work__num {
  font-family: var(--font-heading); font-size: 44px;
  line-height: 1; color: var(--color-accent-300);
}
.work__item h3 {
  font-size: 19px; margin: var(--space-3) 0 var(--space-2);
  color: var(--color-neutral-100);
}
.work__item p { font-size: 15px; line-height: 1.9; margin: 0; color: var(--color-neutral-200); }

/* — profile — */
.profile { padding-block: var(--space-8); }
.profile__grid {
  display: grid; grid-template-columns: .9fr 1.1fr;
  gap: var(--space-7); align-items: start;
}
.profile__name {
  font-size: 30px; font-family: var(--font-heading);
  letter-spacing: .08em;
}
.profile__role { font-size: 13px; letter-spacing: .18em; color: var(--color-accent-700); margin-top: 6px; }
.profile__bio {
  line-height: 1.95; margin: var(--space-4) 0 0;
  color: var(--color-neutral-800); text-wrap: pretty;
}
.profile__tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-5); }
.profile__certs-head { font-size: 18px; margin: var(--space-6) 0 var(--space-3); }
.profile__certs {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2) var(--space-4);
  font-size: 14px; line-height: 1.8; color: var(--color-neutral-800);
}
.table-scroll { overflow-x: auto; }

/* — contact — */
.contact { padding-block: var(--space-6) var(--space-8); }
.contact__card {
  padding: var(--space-7); display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--space-7); align-items: center;
}
.contact__card h2 { margin: 0 0 var(--space-3); font-size: 30px; }
.contact__card p { line-height: 1.9; margin: 0; color: var(--color-neutral-800); text-wrap: pretty; }
.contact__actions { margin-top: var(--space-5); display: flex; flex-wrap: wrap; gap: var(--space-3); }
.contact__meta {
  margin: 0; display: grid; grid-template-columns: auto 1fr;
  gap: var(--space-3) var(--space-5); font-size: 15px; line-height: 1.8;
}
.contact__meta dt { color: var(--color-accent-700); font-size: 13px; letter-spacing: .12em; }
.contact__meta dd { margin: 0; }

/* — footer — */
.site-footer { border-top: 1px solid var(--color-neutral-300); }
.site-footer .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4); padding-block: var(--space-5);
  font-size: 13px; color: var(--color-neutral-700);
}
.site-footer img { height: 24px; width: auto; }

/* — responsive — */
@media (max-width: 900px) {
  .hero__grid, .profile__grid, .contact__card { grid-template-columns: 1fr; }
  .services__grid, .work__grid { grid-template-columns: repeat(2, 1fr); }
  .hero__card { max-width: 420px; }
}

@media (max-width: 640px) {
  .site-header .wrap { flex-wrap: wrap; }
  .site-nav { gap: var(--space-3); font-size: 13px; flex-wrap: wrap; }
  .services__grid, .work__grid, .profile__certs { grid-template-columns: 1fr; }
  .contact__meta { grid-template-columns: 1fr; gap: var(--space-1) 0; }
  .contact__meta dt { margin-top: var(--space-3); }
  .contact__card { padding: var(--space-5); }
  .section-head { flex-direction: column; gap: var(--space-1); }
  .site-footer .wrap { flex-direction: column; align-items: flex-start; }
}

/* ══════════════════════════════════════════════════════════════════════
   名刺（ツナグアライン 縦型）に合わせた調整。

   名刺は「温白の上段 / クリームの下段」を細い罫線で分けた二層構成で、
   字間が広く、中央に寄せた静かな組み。氏名だけが明朝で大きい。
   その性格をページの帯構成・字間・書体の使い分けに写している。
   ══════════════════════════════════════════════════════════════════ */

/* 名刺には製図的なコーナーマークが無い。
   元のワイヤーフレーム表現に戻したい場合は、この1行を消せばよい。 */
.blueprint > .corner { display: none; }

/* — 帯の交互 — 名刺の二層構成をページ全体のリズムに置き換える */
.services,
.contact {
  background: var(--color-surface);
  border-block: 1px solid var(--color-divider);
  padding-block: var(--space-8);
}
.work {
  background: var(--color-accent);   /* 名刺ロゴと同じ #202342 */
  margin-top: 0;                     /* 帯どうしを罫線で接させる */
}

/* — 字間 — 名刺は和文の字間が広い */
.section-head h2 { letter-spacing: .12em; }
.hero__title { letter-spacing: .06em; line-height: 1.35; }
.card-title { letter-spacing: .06em; }
.work__item h3 { letter-spacing: .08em; }

/* — 氏名だけ明朝 — 名刺で唯一セリフが使われている箇所 */
.profile__name {
  font-family: var(--font-serif);
  font-weight: 500;
  letter-spacing: .32em;   /* 名刺の「関口　一」の広い字送り */
  font-size: 32px;
}
.profile__role {
  font-family: var(--font-serif);
  letter-spacing: .16em;
}

/* — ヒーローの銘板 — 名刺そのものを思わせる小さな面にする */
.hero__card {
  background: var(--color-surface);
  border-color: var(--color-neutral-300);
  padding-block: var(--space-7);
}
.hero__wordmark { letter-spacing: .1em; }

/* 名刺と同じく、区切りは面の変化と細い罫線だけで表す */
.site-header { border-bottom-color: var(--color-divider); }
.site-footer { border-top-color: var(--color-divider); }

/* 名刺の下段は枠を持たない面。帯の中でさらに枠で囲うと入れ子になるため、
   問い合わせは罫線を外して面そのものに置く。 */
.contact__card {
  border: 0;
  padding: 0;
  background: transparent;
}
.contact .wrap { padding-block: var(--space-4); }

/* 連絡先の項目名は、名刺と同じく細く広い字送りの小さな見出しにする */
.contact__meta dt {
  color: var(--color-neutral-700);
  letter-spacing: .18em;
  font-size: 12px;
}