/* 院長のきもち — Lien鍼灸院整骨院
   Static page for https://lien-tachibana.com/message/
   Uses Lien Design System token values (hardcoded — see README §Design Tokens
   if the project later adopts the shared _ds token stylesheet). */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&family=Inter:wght@400;500;700&display=swap');

:root {
  --color-navy: #1B2B4A;
  --color-orange: #C96A24;
  --color-orange-600: #B25A1C;
  --color-olive: #7E9A4E;
  --color-bg: #FFFFFF;
  --color-bg-warm: #F5F3EF;
  --text-body: #1B2B4A;
  --text-muted: #5A6478;
  --color-border: #E2E0DA;

  --font-heading: "Noto Sans JP", sans-serif;
  --font-body: "Noto Sans JP", sans-serif;
  --font-en: "Inter", system-ui, sans-serif;

  --fs-display: 2.5rem;
  --fs-h1: 2rem;
  --fs-h2: 1.5rem;
  --fs-h3: 1.25rem;
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-eyebrow: 0.8125rem;

  --lh-display: 1.25;
  --lh-h2: 1.35;
  --lh-h3: 1.4;
  --lh-body: 1.8;
  --lh-small: 1.6;

  --fw-medium: 500;
  --fw-bold: 700;
  --tracking-eyebrow: 0.15em;

  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-10: 96px;

  --max-width: 1120px;
  --measure: 680px;

  --radius-sm: 6px;
  --radius-lg: 20px;

  --shadow-card: 0 2px 12px rgba(27, 43, 74, 0.08);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--color-bg);
  font-family: var(--font-body);
  color: var(--text-body);
  max-width: 100%;
  overflow-x: hidden;
}

a { color: var(--color-orange); }
a:hover { color: var(--color-orange-600); }

.lien-message-container { max-width: var(--max-width); margin: 0 auto; }
.lien-message-measure { max-width: var(--measure); margin: 0 auto; }

.lien-message-para { font-size: var(--fs-body); line-height: var(--lh-body); margin: 0 0 1.4em; }
.lien-message-para:last-child { margin-bottom: 0; }

/* Header */
.lien-message-header {
  background: var(--color-bg);
  padding: var(--space-3) var(--space-4);
  display: flex;
  justify-content: center;
  border-bottom: 1px solid var(--color-border);
}
.lien-message-logo-slot {
  width: 100%;
  max-width: 240px;
  aspect-ratio: 4 / 1;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: var(--fs-small);
  text-decoration: none;
}

/* Hero */
.lien-message-hero { background: var(--color-bg-warm); padding: var(--space-10) var(--space-4); text-align: center; }
.lien-message-hero-title {
  font-family: var(--font-heading);
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  font-weight: var(--fw-bold);
  color: var(--color-navy);
  margin: 0 0 var(--space-3);
}
.lien-message-divider { width: 48px; height: 2px; background: var(--color-olive); margin: 0 auto var(--space-4); }
.lien-message-hero-sub { font-size: var(--fs-h3); line-height: var(--lh-h3, 1.4); color: var(--text-body); margin: 0; }

/* Profile */
.lien-message-profile { background: var(--color-bg); padding: var(--space-10) var(--space-4); }
.lien-message-profile-inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  align-items: center;
  justify-content: center;
}
.lien-message-photo {
  flex: 0 1 280px;
  width: 100%;
  max-width: 480px;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.lien-message-photo img { width: 100%; height: 100%; object-fit: cover; display: block; margin: 0 auto; }
.lien-message-profile-text { flex: 0 1 280px; min-width: 240px; text-align: center; }
.lien-message-eyebrow {
  font-family: var(--font-en);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  color: var(--color-orange);
  text-transform: uppercase;
  margin: 0 0 var(--space-2);
}
.lien-message-name {
  font-family: var(--font-heading);
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  color: var(--color-navy);
  margin: 0 0 var(--space-3);
}
.lien-message-qualification { font-size: var(--fs-body); color: var(--text-muted); line-height: var(--lh-body); margin: 0; }

/* Story sections */
.lien-message-story1 { background: var(--color-bg); padding: var(--space-10) var(--space-4); }
.lien-message-story2 { background: var(--color-bg); padding: var(--space-10) var(--space-4); }
.lien-message-story3 { background: var(--color-bg-warm); padding: var(--space-10) var(--space-4); }

.lien-message-subhead {
  font-family: var(--font-heading);
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  color: var(--color-navy);
  line-height: var(--lh-h2);
  margin: 0 0 var(--space-5);
  border-left: 4px solid var(--color-orange);
  padding-left: var(--space-3);
}

.lien-message-quote {
  margin: 0 0 var(--space-6);
  padding-left: var(--space-4);
  border-left: 3px solid var(--color-olive);
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  color: var(--color-navy);
  font-style: normal;
}

.lien-message-list {
  list-style: none;
  margin: var(--space-5) 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.lien-message-list li {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}
.lien-message-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-olive);
  flex: none;
  margin-top: 0.6em;
}

/* Closing */
.lien-message-closing { background: var(--color-bg); padding: var(--space-10) var(--space-4); text-align: center; }
.lien-message-closing-text { margin-bottom: var(--space-5); }
.lien-message-signature {
  font-family: var(--font-heading);
  font-weight: var(--fw-medium);
  color: var(--color-navy);
  font-size: var(--fs-body);
  margin: 0 0 var(--space-6);
}
.lien-message-cta {
  display: inline-block;
  background: var(--color-orange);
  color: #FFFFFF;
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--fs-body);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: background 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.lien-message-cta:hover { background: var(--color-orange-600); color: #FFFFFF; }

/* Footer */
.lien-message-footer { background: var(--color-navy); color: #FFFFFF; padding: var(--space-5) var(--space-4); text-align: center; }
.lien-message-address { margin: 0 0 var(--space-2); font-size: var(--fs-small); line-height: var(--lh-small); opacity: 0.85; }
.lien-message-back-link { font-size: var(--fs-small); color: #FFFFFF; opacity: 0.85; text-decoration: underline; }
.lien-message-back-link:hover { color: #FFFFFF; opacity: 1; }