@charset "UTF-8";
/* =============================================================
   LA MAISON — おみそについて　v2
   -------------------------------------------------------------
   置き場所: omiso-about.css として新規作成し、
   about ページでだけ読み込みます（functions.php の追記とセット）。

   考え方
     ・面は「深緑」だけ。あとは紙と罫線
     ・組みは静かに、言葉は跳ねたまま。
       いただいた「ワッショイ」「美味い！！」を直さずに置ける器にします
     ・写真は0枚でも成立し、入れた瞬間に立ち上がる

    0. 色と設定
    1. ページ枠
    2. 見出し
    3. 自己紹介の本文
    4. セクション見出し（共通）
    5. いつものこと
    6. 写真
    7. いま好きなもの
    8. これまでのこと
    9. 導線
   10. レスポンシブ
   12. スマホの手触り
   13. アクセシビリティ

   ページの並び（テンプレート側）
     見出し → いつものこと → 本文 → 写真
     → いま好きなもの → これまでのこと → 導線
     長い自己紹介より先に「いつものこと」を出します
   ============================================================= */

/* =============================================================
   0. 色と設定
   ============================================================= */
.ma-page {
  --ma-paper:   var(--omiso-paper);
  --ma-paper-2: var(--omiso-paper-2);
  --ma-vert:    var(--omiso-vert);
  --ma-brass:   var(--omiso-laiton);
  --ma-ink:     var(--omiso-ink);
  --ma-ink-soft:var(--omiso-ink-soft);
  --ma-rule:    rgba(var(--omiso-ink-rgb), .14);
  --ma-rule-2:  rgba(var(--omiso-ink-rgb), .34);
  --ma-label:   "Cormorant Garamond", "Cormorant", serif;
  --ma-mincho:  "Zen Old Mincho", "Yu Mincho", "Hiragino Mincho ProN", serif;
  --ma-sans:    "Zen Kaku Gothic New", -apple-system, "Hiragino Sans", sans-serif;
  --ma-ease:    cubic-bezier(.16, 1, .3, 1);
  --ma-measure: 42rem;
}

/* =============================================================
   1. ページ枠
   ============================================================= */
.ma-page {
  max-width: 860px;
  margin: 0 auto;
  padding: 44px 20px 88px;
  box-sizing: border-box;
  width: 100%;
  color: var(--ma-ink);
  font-family: var(--ma-sans);
}

/* =============================================================
   2. 見出し
   L'ALMANACH の月・LA FLÂNERIE の方位磁針と同じ位置にアバターを置きます
   ============================================================= */
.ma-header {
  margin: 0 0 48px;
  background: var(--ma-vert);
  color: var(--ma-paper);
  background-image:
    linear-gradient(90deg,  var(--ma-brass) 0 18px, transparent 18px),
    linear-gradient(180deg, var(--ma-brass) 0 18px, transparent 18px),
    linear-gradient(270deg, var(--ma-brass) 0 18px, transparent 18px),
    linear-gradient(0deg,   var(--ma-brass) 0 18px, transparent 18px);
  background-size: 100% 1px, 1px 100%, 100% 1px, 1px 100%;
  background-position: left top, left top, right bottom, right bottom;
  background-repeat: no-repeat;
}
.ma-header__inner {
  display: flex;
  align-items: center;
  gap: 38px;
  padding: 48px 30px;
}

.ma-avatar {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 1px solid var(--ma-brass);
  overflow: hidden;
  color: var(--ma-brass);
}
.ma-avatar img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
/* アバター未設定のとき。絵柄ではなく頭文字を置きます。
   何かの形に見立てるより、名前そのもののほうが外しません */
.ma-avatar__mono {
  font-family: var(--ma-label);
  font-size: 3.2rem;
  line-height: 1;
  letter-spacing: .02em;
  color: var(--ma-brass);
  padding-bottom: .06em;   /* Cormorant は少し上に寄るので下げます */
}

.ma-header__text { min-width: 0; }
.ma-header__en {
  display: block;
  font-family: var(--ma-label);
  font-variant: small-caps;
  font-size: 1rem;
  letter-spacing: .28em;
  color: var(--ma-brass);
  margin-bottom: 8px;
}
.ma-header__title {
  font-family: var(--ma-mincho);
  font-size: clamp(1.8rem, 5.4vw, 2.6rem);
  font-weight: 400;
  letter-spacing: .14em;
  color: var(--ma-paper);
  margin: 0 0 10px;
}
.ma-header__location {
  margin: 0;
  font-family: var(--ma-mincho);
  font-size: .88rem;
  line-height: 1.8;
  letter-spacing: .06em;
  color: rgba(244, 237, 232, .66);
}

/* =============================================================
   3. 自己紹介の本文
   -------------------------------------------------------------
   ここは当初「短い一行を大きく」で組んでいましたが、
   実際には8段落の読み物が入りました。
   長い日本語を中央揃えにすると行頭が毎行ずれて読みにくいので、
   左揃えの読み物として組み直しています
   ============================================================= */
.ma-prose {
  max-width: var(--ma-measure);
  margin: 64px auto 0;
  font-family: var(--ma-mincho);
  font-size: 1rem;
  line-height: 2.05;
  letter-spacing: .04em;
  color: var(--ma-ink);
  text-align: left;
}
.ma-prose + .ma-prose { margin-top: 1.6em; }

.ma-prose p {
  margin: 0 0 1.5em;
  font: inherit;
  color: inherit;
  text-align: left;
}
.ma-prose p:last-child { margin-bottom: 0; }

.ma-prose a {
  color: var(--ma-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--ma-rule-2);
}
.ma-prose strong { font-weight: 600; }

/* =============================================================
   4. セクション見出し（共通）
   ============================================================= */
.ma-section-title {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0;
  font-family: var(--ma-mincho);
  font-size: 1.15rem;
  font-weight: 400;
  letter-spacing: .1em;
  color: var(--ma-ink);
}
.ma-section-title__en {
  font-family: var(--ma-label);
  font-variant: small-caps;
  font-size: .95rem;
  letter-spacing: .2em;
  color: var(--ma-brass);
}

/* =============================================================
   5. いつものこと（このページの心臓部）
   文の長さが12〜40字とばらつくので、ラベルを上・本文を下に積みます。
   短くても長くても崩れません
   ============================================================= */
.ma-habits {
  padding-top: 26px;
  border-top: 3px double var(--ma-rule-2);
}
/* 見出しの直後に来るので、上の余白は見出し側が持ちます */
.ma-header + .ma-habits { margin-top: 0; }
.ma-habits__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

/* 平日／休みの日 */
.ma-habits__tabs {
  display: flex;
  gap: 22px;
}
.ma-habits__tab {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 4px 0;
  background: none;
  border: 0;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  box-shadow: none;
  cursor: pointer;
  transition: color .25s, border-color .25s;
  color: var(--ma-ink-soft);
}
.ma-habits__tab-en {
  font-family: var(--ma-label);
  font-variant: small-caps;
  font-size: .8rem;
  letter-spacing: .18em;
  color: var(--ma-brass);
  opacity: .8;
}
.ma-habits__tab-ja {
  font-family: var(--ma-mincho);
  font-size: .88rem;
  letter-spacing: .08em;
  color: inherit;
}
.ma-habits__tab:hover { color: var(--ma-ink); border-bottom-color: var(--ma-brass); }
.ma-habits__tab.is-active {
  color: var(--ma-vert);
  border-bottom: 2px solid var(--ma-vert);
}
.ma-habits__tab.is-active .ma-habits__tab-en { opacity: 1; }

.ma-habits__panel { border-top: 1px solid var(--ma-rule); }
.ma-habits__panel[hidden] { display: none; }

.ma-habit {
  position: relative;
  padding: 24px 0 24px 4px;
  border-bottom: 1px solid var(--ma-rule);
  transition: background-color .3s var(--ma-ease), padding-left .3s var(--ma-ease);
}
/* ホバーで左に真鍮の縦線。LA FLÂNERIE の索引と同じ作法 */
.ma-habit::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 2px; height: 0;
  background: var(--ma-brass);
  transform: translateY(-50%);
  transition: height .3s var(--ma-ease);
}
.ma-habit:hover { background: var(--ma-paper-2); padding-left: 14px; }
.ma-habit:hover::before { height: 58%; }

.ma-habit__label {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 8px;
}
.ma-habit__fr {
  font-family: var(--ma-label);
  font-variant: small-caps;
  font-size: 1rem;
  letter-spacing: .2em;
  color: var(--ma-brass);
}
.ma-habit__time {
  font-family: var(--ma-mincho);
  font-size: .9rem;
  letter-spacing: .1em;
  color: var(--ma-ink-soft);
}
/* ここがページの心臓部なので、本文より少し大きく組みます */
.ma-habit__text {
  max-width: 34em;
  margin: 0;
  font-family: var(--ma-mincho);
  font-size: 1.08rem;
  line-height: 2;
  letter-spacing: .04em;
  color: var(--ma-ink);
}

/* タブを切り替えると、4行が上から順に現れます */
@keyframes ma-rise {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ma-habits__panel.is-switching .ma-habit {
  animation: ma-rise .42s var(--ma-ease) both;
  animation-delay: calc(var(--ma-i, 0) * 40ms);
}

/* =============================================================
   6. 写真（後から入れる想定）
   入っているぶんだけ。0枚ならテンプレート側でセクションごと出ません
   ============================================================= */
.ma-photos {
  display: grid;
  gap: 14px;
  margin-top: 64px;
}
.ma-prose + .ma-photos { margin-top: 56px; }
.ma-photos--1 { grid-template-columns: 1fr; }
.ma-photos--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ma-photos--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.ma-photo { margin: 0; min-width: 0; }
.ma-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  background: var(--ma-paper-2);
}
/* 1枚だけのときは横長で大きく */
.ma-photos--1 .ma-photo img { aspect-ratio: 16 / 9; }

.ma-photo__caption {
  margin-top: 8px;
  font-family: var(--ma-label);
  font-variant: small-caps;
  font-size: .8rem;
  letter-spacing: .18em;
  color: var(--ma-brass);
}

/* =============================================================
   7. いま好きなもの
   ============================================================= */
.ma-moments {
  margin-top: 64px;
  padding-top: 26px;
  border-top: 3px double var(--ma-rule-2);
}
.ma-moments__list {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  border-top: 1px solid var(--ma-rule);
}
.ma-moment { border-bottom: 1px solid var(--ma-rule); }

.ma-moment__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 16px;
  padding: 16px 4px;
  text-decoration: none;
  color: inherit;
  transition: background-color .3s var(--ma-ease), padding-left .3s var(--ma-ease);
}
a.ma-moment__row:hover { background: var(--ma-paper-2); padding-left: 12px; }

.ma-moment__no {
  font-family: var(--ma-label);
  font-size: .95rem;
  letter-spacing: .04em;
  color: var(--ma-brass);
}
.ma-moment__label {
  font-family: var(--ma-mincho);
  font-size: .95rem;
  line-height: 1.8;
  letter-spacing: .04em;
  color: var(--ma-ink);
}
.ma-moment__arrow {
  font-family: var(--ma-label);
  font-size: 1rem;
  color: var(--ma-ink-soft);
  transition: transform .3s var(--ma-ease), color .3s;
}
a.ma-moment__row:hover .ma-moment__arrow {
  transform: translateX(4px);
  color: var(--ma-vert);
}

/* =============================================================
   8. これまでのこと（畳んであります）
   L'ALMANACH の凡例と同じ作法
   ============================================================= */
.ma-history { margin-top: 48px; }
.ma-history__summary {
  display: inline-block;
  padding: 6px 0;
  font-family: var(--ma-mincho);
  font-size: .9rem;
  letter-spacing: .08em;
  color: var(--ma-ink-soft);
  cursor: pointer;
  list-style: none;
  border-bottom: 1px solid var(--ma-rule-2);
}
.ma-history__summary::-webkit-details-marker { display: none; }
.ma-history__summary::before {
  content: "＋";
  margin-right: 8px;
  color: var(--ma-brass);
}
.ma-history[open] .ma-history__summary::before { content: "−"; }
.ma-history__summary:hover { color: var(--ma-vert); }

.ma-timeline {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  border-top: 1px solid var(--ma-rule);
}
.ma-timeline__item {
  display: grid;
  grid-template-columns: 6.5em minmax(0, 1fr);
  align-items: baseline;
  gap: 16px;
  padding: 14px 4px;
  border-bottom: 1px solid var(--ma-rule);
}
.ma-timeline__year {
  font-family: var(--ma-label);
  font-size: .95rem;
  letter-spacing: .08em;
  color: var(--ma-brass);
}
.ma-timeline__text {
  font-family: var(--ma-mincho);
  font-size: .9rem;
  line-height: 1.85;
  letter-spacing: .03em;
  color: var(--ma-ink);
}

/* =============================================================
   9. 導線
   v1 は他ページへの入口が1つもありませんでした
   ============================================================= */
.ma-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 72px;
  border-top: 3px double var(--ma-rule-2);
  border-bottom: 1px solid var(--ma-rule-2);
}
.ma-links__item {
  display: block;
  padding: 26px 22px;
  text-decoration: none;
  border-bottom: 1px solid var(--ma-rule);
  border-left: 1px solid var(--ma-rule);
  transition: background-color .3s var(--ma-ease);
}
.ma-links__item:nth-child(odd)  { border-left: 0; }
.ma-links__item:nth-last-child(-n+2) { border-bottom: 0; }
.ma-links__item:hover { background: var(--ma-paper-2); }

.ma-links__en {
  display: block;
  margin-bottom: 8px;
  font-family: var(--ma-label);
  font-variant: small-caps;
  font-size: .9rem;
  letter-spacing: .2em;
  color: var(--ma-brass);
}
.ma-links__ja {
  display: block;
  font-family: var(--ma-mincho);
  font-size: .95rem;
  letter-spacing: .06em;
  color: var(--ma-ink);
}

/* =============================================================
   10. レスポンシブ
   ============================================================= */
@media (max-width: 768px) {
  .ma-page { padding: 0 14px 72px; }

  .ma-header { margin: 0 0 34px; }
  .ma-header__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
    padding: 36px 18px;
  }
  .ma-avatar { width: 96px; height: 96px; }
  .ma-avatar__mono { font-size: 2.6rem; }

  .ma-prose { margin-top: 48px; font-size: .96rem; line-height: 2; }
  .ma-prose p { margin-bottom: 1.4em; }

  .ma-habits__head { align-items: flex-start; gap: 12px; }
  .ma-habits__tabs { gap: 18px; }
  .ma-habit { padding: 20px 0; }
  .ma-habit__text { font-size: 1rem; }

  /* 写真は横スクロール。縦に3枚積むと長くなりすぎます */
  .ma-photos {
    display: flex;
    gap: 10px;
    margin-top: 44px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--ma-brass) transparent;
  }
  .ma-photo {
    flex: 0 0 68%;
    scroll-snap-align: start;
  }
  .ma-photos--1 .ma-photo { flex-basis: 100%; }

  .ma-moments { margin-top: 44px; }
  .ma-moment__row { gap: 12px; padding: 15px 2px; }

  .ma-timeline__item { grid-template-columns: 5.5em minmax(0, 1fr); gap: 12px; }

  /* 導線は1列に */
  .ma-links { grid-template-columns: 1fr; margin-top: 56px; }
  .ma-links__item { padding: 22px 4px; border-left: 0; }
  .ma-links__item:nth-last-child(-n+2) { border-bottom: 1px solid var(--ma-rule); }
  .ma-links__item:last-child { border-bottom: 0; }
}

/* =============================================================
   12. スマホの手触り
   -------------------------------------------------------------
   このページはスマホだと文字が縦に続くだけで単調でした。
   目が休まる場所と、視線が止まる印をつくります。

     ・朝昼夕夜に線画の印（page-about.php が出力します）
     ・自己紹介の本文は、最初の段落だけ大きく
     ・段落の間に真鍮の細い印
     ・一番下の導線に、行き先の線画を薄く敷く
   ============================================================= */

/* ── 朝昼夕夜の印 ───────────────────────────────── */
.ma-habit__mark {
  flex: none;
  display: block;
  color: var(--ma-brass);
  opacity: .9;
}
.ma-habit__label {
  align-items: center;
  gap: 10px;
}
.ma-habit__fr { line-height: 1; }

/* 夜だけ、印をわずかに沈ませます（同じ絵の並びに変化をつけるため） */
.ma-habits__panel .ma-habit:last-child .ma-habit__mark { opacity: 1; }

/* ── 本文 ───────────────────────────────────────── */
/* 書き出しの段落だけ、少し大きく組みます */
.ma-prose > p:first-child {
  font-size: 1.08em;
  line-height: 1.95;
}

/* 段落の切れ目に、真鍮の小さな印 */
.ma-prose + .ma-prose::before,
.ma-photos::before {
  content: "✦";
  display: block;
  margin: 0 0 26px;
  text-align: center;
  font-family: var(--ma-label);
  font-size: .78rem;
  letter-spacing: .3em;
  color: var(--ma-brass);
  opacity: .55;
}

/* ── 導線に、行き先の線画 ───────────────────────── */
.ma-links__item {
  position: relative;
  overflow: hidden;
}
.ma-links__item::after {
  content: "";
  position: absolute;
  right: -8px;
  bottom: -10px;
  width: 74px;
  height: 74px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: .13;
  pointer-events: none;
}
/* カウンターの独り言 ── 一枚の紙片 */
.ma-links__item--hitorigoto::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%231F3D33' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M20 20h60v46H36L20 82Z'/%3E%3Cpath d='M32 36h36M32 50h24' stroke-width='1.6'/%3E%3C/svg%3E");
}
/* おみその暦 ── 暦のマス。月だけだと何の月か伝わらないので、
   マス目に月を添えた形にします */
.ma-links__item--mood-log::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%231F3D33' stroke-width='2.4'%3E%3Crect x='16' y='24' width='68' height='60'/%3E%3Cpath d='M16 42h68' /%3E%3Cpath d='M39 42v42M61 42v42M16 63h68' stroke-width='1.2'/%3E%3Cpath d='M30 24v-8M70 24v-8' stroke-linecap='round'/%3E%3Crect x='39' y='42' width='22' height='21' fill='%231F3D33' stroke='none'/%3E%3C/svg%3E");
}
/* おみそ散歩 ── 方位磁針 */
.ma-links__item--spot-map::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%231F3D33' stroke-width='2.4'%3E%3Ccircle cx='50' cy='50' r='31'/%3E%3Cpath d='M50 15v7M50 78v7M15 50h7M78 50h7' stroke-linecap='round'/%3E%3Cpath d='M50 26 56 50 50 55 44 50Z' fill='%231F3D33' stroke='none'/%3E%3Cpath d='M50 74 56 50 50 45 44 50Z' stroke-width='1.6'/%3E%3C/svg%3E");
}
/* おみその推しコス ── 口紅 */
.ma-links__item--cosme-ranking::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%231F3D33' stroke-width='2.4' stroke-linejoin='round'%3E%3Cpath d='M38 40h24v42H38z'/%3E%3Cpath d='M41 40V24c0-3 3-6 9-6s9 3 9 6v16'/%3E%3Cpath d='M41 24 59 18' stroke-width='1.6'/%3E%3Cpath d='M34 82h32' stroke-linecap='round'/%3E%3C/svg%3E");
}

@media (max-width: 768px) {
  /* 印を少し大きく、位置を上げます */
  .ma-links__item::after { width: 62px; height: 62px; right: -4px; bottom: -6px; }
  .ma-links__item { padding-right: 62px; }

  .ma-habit__mark { width: 17px; height: 17px; }

  /* 「いつものこと」のタブは、指で押しやすい大きさに */
  .ma-habits__tab { padding: 8px 0; }
  .ma-habits__tab-ja { font-size: .92rem; }

  /* 見出しの帯。アバターと文字が寄りすぎていました */
  .ma-header__inner { gap: 18px; }

  .ma-prose > p:first-child { font-size: 1.05em; }
}

@media (hover: none) {
  .ma-links__item:active,
  .ma-moment__row:active,
  .ma-habit:active { background: var(--ma-paper-2); }
  .ma-links__item,
  .ma-moment__row { -webkit-tap-highlight-color: transparent; }
}

/* =============================================================
   13. アクセシビリティ
   ============================================================= */
.ma-page a:focus-visible,
.ma-page button:focus-visible,
.ma-page summary:focus-visible {
  outline: 1px solid var(--ma-brass);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .ma-habit,
  .ma-habit::before,
  .ma-moment__row,
  .ma-moment__arrow,
  .ma-links__item,
  .ma-habits__tab { transition: none; }

  .ma-habits__panel.is-switching .ma-habit { animation: none; }
}