/* ============================================================
   vintagecarpet — home.css v2「白 × 朱の現代アーカイブ」
   ※ tokens.css → app.css → home.css の順でレイアウトが個別読込（@import不使用）。
   ============================================================ */
@layer page {
  /* —— HERO: 左に活字組の大見出し、右に図録フレームの一枚 —— */
  .hero { padding-block: clamp(2rem, 5vw, 4rem) var(--s-2xl); position: relative; overflow: clip; }
  .hero__grid {
    display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--gutter);
    align-items: center;
  }
  .hero__copy { position: relative; }
  .hero__since { font-family: var(--grotesk); font-weight: 600; font-size: var(--t-xs);
    letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--red);
    display: flex; align-items: center; gap: .8em; margin-block-end: var(--s-md);
    &::after { content: ""; flex: 1; height: 1px; background: var(--line-2); } }
  .hero h1 {
    font-family: var(--serif); font-weight: 500;
    font-size: var(--t-display); line-height: 1.06; letter-spacing: .02em; color: var(--ink);
  }
  /* 「美しい。」を朱で、下に手描き的な朱の波線 */
  .hero h1 .accent { color: var(--red); position: relative; white-space: nowrap; }
  .hero h1 .accent::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -.12em; height: .14em;
    background: var(--red); transform: scaleX(0); transform-origin: left;
    animation: underline 1.1s var(--ease) .4s forwards;
  }
  @keyframes underline { to { transform: scaleX(1); } }
  .hero__lead { max-width: 34ch; color: var(--ink-2); font-size: var(--t-base);
    line-height: var(--lh-body); margin-block-start: var(--s-md); }
  .hero__sub { font-family: var(--grotesk); font-style: normal; font-size: var(--t-sm);
    letter-spacing: .14em; color: var(--ink-3); margin-block-start: var(--s-sm); text-transform: uppercase; }
  .hero__cta { margin-block-start: var(--s-lg); display: flex; flex-wrap: wrap; gap: var(--s-sm); align-items: center; }

  /* 背景のギリ幾何（うっすら） */
  .hero__geo { position: absolute; inset-block-start: -6%; inset-inline-end: 40%;
    inline-size: min(34vw, 24rem); aspect-ratio: 1; color: var(--red); opacity: .05;
    z-index: -1; pointer-events: none; }

  /* 右の一枚: 図録フレーム + 標本札 */
  .hero__plate { position: relative; }
  .hero__frame { position: relative; border: var(--rule); padding: 14px; background: var(--paper); }
  .hero__frame::after { content: ""; position: absolute; inset: 7px; border: 1px solid var(--red); opacity: .35; pointer-events: none; }
  .hero__frame figure { position: relative; overflow: hidden; aspect-ratio: 5 / 6; background: var(--paper-2); }
  .hero__frame img { inline-size: 100%; block-size: 100%; object-fit: cover; }
  .hero__label { position: absolute; inset-block-end: -1px; inset-inline: 14px;
    background: var(--ink); color: var(--paper); padding: var(--s-xs) var(--s-sm);
    display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-sm); }
  .hero__label .ln { font-family: var(--serif); font-size: var(--t-sm); letter-spacing: .06em; }
  .hero__label .ls { font-family: var(--grotesk); font-size: var(--t-2xs); letter-spacing: .14em;
    text-transform: uppercase; color: var(--red-bright); }
  .hero__caption { position: absolute; inset-block-start: 14px; inset-inline-start: 14px;
    background: var(--red); color: var(--paper); font-family: var(--grotesk); font-weight: 600;
    font-size: var(--t-2xs); letter-spacing: .14em; padding: .35em .8em; text-transform: uppercase; }

  @media (max-width: 940px) {
    .hero__grid { grid-template-columns: 1fr; gap: var(--s-lg); }
    .hero__geo { inset-inline-end: -5%; opacity: .04; }
  }

  /* —— 産地テロップ（白地に朱の区切り）—— */
  .ticker { border-block: var(--rule); padding-block: var(--s-sm); overflow: hidden; background: var(--paper); }
  .ticker__track { display: flex; gap: var(--s-lg); inline-size: max-content;
    animation: ticker 40s linear infinite;
    font-family: var(--grotesk); font-weight: 600; font-size: var(--t-md);
    letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
  .ticker__track span { display: inline-flex; gap: var(--s-lg); align-items: center;
    &::after { content: "◆"; color: var(--red); font-size: .6em; } }
  .ticker:hover .ticker__track { animation-play-state: paused; }
  @keyframes ticker { to { transform: translateX(-50%); } }

  /* —— PHILOSOPHY / 信条 + 実績の crest —— */
  .philo { background: var(--paper-2); }
  .philo .wrap { max-width: 860px; text-align: center; }
  .philo__q { font-family: var(--serif); font-size: clamp(1.3rem, 1rem + 1.6vw, 2rem);
    line-height: 2; letter-spacing: .04em; color: var(--ink); }
  .philo__q em { font-style: normal; color: var(--red); }
  .crest { display: flex; justify-content: center; margin-block-start: var(--s-xl);
    border-block-start: var(--rule); }
  .crest div { flex: 1; padding: var(--s-md) var(--s-xs) 0; border-inline-end: var(--hair); }
  .crest div:last-child { border-inline-end: 0; }
  .crest .n { font-family: var(--grotesk); font-weight: 700; font-size: clamp(1.4rem, 1rem + 1.6vw, 2.1rem);
    color: var(--red); font-variant-numeric: tabular-nums; }
  .crest .l { font-size: var(--t-2xs); letter-spacing: .08em; color: var(--ink-3); margin-block-start: .3em; }
  @media (max-width: 600px) { .crest { flex-wrap: wrap; } .crest div { flex: 0 0 50%; border-block-end: var(--hair); padding-block-end: var(--s-md); } }

  /* —— FEATURED masterpiece —— */
  .featured .wrap--wide { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 6vw, 5rem); align-items: center; }
  .featured__art { position: relative; border: var(--rule); padding: 16px; background: var(--paper); }
  .featured__art::after { content: ""; position: absolute; inset: 8px; border: 1px solid var(--red); opacity: .3; pointer-events: none; }
  .featured__art img { inline-size: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
  .featured__tag { font-family: var(--grotesk); font-weight: 600; letter-spacing: .26em;
    text-transform: uppercase; font-size: var(--t-xs); color: var(--red); }
  .featured h3 { font-size: var(--t-lg); margin-block: var(--s-xs) var(--s-2xs); }
  .featured__meta { font-family: var(--grotesk); font-size: var(--t-xs); letter-spacing: .1em;
    color: var(--ink-3); margin-block-end: var(--s-sm); text-transform: uppercase; }
  .featured p { color: var(--ink-2); font-size: var(--t-base); margin-block-end: var(--s-sm); }
  .featured__price { font-family: var(--grotesk); font-weight: 600; font-size: var(--t-lg);
    color: var(--ink); margin-block: var(--s-2xs) var(--s-md); font-variant-numeric: tabular-nums;
    & small { font-size: .5em; color: var(--ink-3); letter-spacing: .1em; margin-left: .6em; font-family: var(--sans); } }
  @media (max-width: 860px) { .featured .wrap { grid-template-columns: 1fr; gap: var(--s-lg); } }

  /* —— COLLECTION グリッド（非対称・大小のリズム）—— */
  .grid-plates { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-lg) var(--s-md); align-items: start; }
  .grid-plates > .plate.plate--wide { grid-column: span 2; }
  .grid-plates > .plate.plate--wide .plate__media { aspect-ratio: 8 / 5; }
  .grid-plates > .plate.plate--wide .plate__title { font-size: var(--t-md); }
  /* 偶発的な段差で「棚に並べた」揺らぎ */
  .grid-plates > .plate:nth-child(4n+3) { transform: translateY(var(--s-md)); }
  @media (max-width: 900px) {
    .grid-plates { grid-template-columns: repeat(2, 1fr); }
    .plate--wide { grid-column: span 2; }
    .grid-plates > .plate:nth-child(4n+3) { transform: none; }
  }
  @media (max-width: 520px) {
    .grid-plates { grid-template-columns: 1fr 1fr; gap: var(--s-md) var(--s-sm); }
    .plate--wide { grid-column: span 2; }
  }

  /* —— PROVENANCE / 目利きと修復（墨地）—— */
  .prov { background: var(--ink); color: var(--paper-2); }
  .prov .wrap--wide { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 6vw, 4.5rem); align-items: center; }
  .prov__art { border: 1px solid color-mix(in oklab, var(--paper) 30%, transparent); padding: 14px; }
  .prov__art img { inline-size: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
  .prov .eyebrow { color: var(--red-bright); }
  .prov h2 { color: var(--paper); font-size: var(--t-xl); margin-block: var(--s-xs) var(--s-sm); }
  .prov p { color: var(--ink-3); font-size: var(--t-base); }
  .prov__pts { margin-block-start: var(--s-md); border-block-start: 1px solid color-mix(in oklab, var(--ink-3) 40%, transparent); }
  .prov__pts div { display: flex; gap: var(--s-sm); align-items: baseline; padding-block: var(--s-sm);
    border-block-end: 1px solid color-mix(in oklab, var(--ink-3) 40%, transparent); font-size: var(--t-sm); color: var(--paper-2); }
  .prov__pts .no { font-family: var(--serif); color: var(--red-bright); font-size: var(--t-md); min-inline-size: 1.4em; }
  @media (max-width: 860px) { .prov .wrap { grid-template-columns: 1fr; gap: var(--s-lg); } }

  /* —— SIZE INDEX（置く場所から）—— */
  .sizes { background: var(--paper-2); }
  .sizes__row { display: grid; grid-template-columns: repeat(5, 1fr); border: var(--hair); background: var(--paper); }
  .sizes__row a { padding: var(--s-md) var(--s-xs); text-align: center; border-inline-end: var(--hair);
    transition: background var(--d1) var(--ease); }
  .sizes__row a:last-child { border-inline-end: 0; }
  .sizes__row a:hover { background: var(--red-tint); }
  .sizes__row .num { font-family: var(--grotesk); font-weight: 600; font-size: var(--t-md); color: var(--red); }
  .sizes__row h4 { font-family: var(--serif); font-size: var(--t-base); margin-block: var(--s-2xs) .2em; }
  .sizes__row span { font-size: var(--t-2xs); color: var(--ink-3); letter-spacing: .04em; }
  @media (max-width: 760px) { .sizes__row { grid-template-columns: 1fr 1fr; }
    .sizes__row a { border-block-end: var(--hair); } .sizes__row a:nth-child(2n){ border-inline-end: 0; } }

  /* —— JOURNAL / 絨毯を識る —— */
  .journal__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-lg) var(--s-md); }
  .journal__card { border-block-start: 2px solid var(--red); padding-block-start: var(--s-sm); }
  .journal__k { font-family: var(--grotesk); font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
    font-size: var(--t-2xs); color: var(--red); }
  .journal__card h4 { font-size: var(--t-md); margin-block: var(--s-2xs) var(--s-2xs); }
  .journal__card p { font-size: var(--t-sm); color: var(--ink-2); margin-block-end: var(--s-xs); }
  @media (max-width: 760px) { .journal__grid { grid-template-columns: 1fr; } }

  /* —— CONSULT（朱の帯）—— */
  .consult { background: var(--red); color: var(--paper); background-image:
      radial-gradient(120% 100% at 50% 0%, rgba(255,255,255,.08), transparent 60%); text-align: center; }
  .consult .wrap { max-width: 760px; }
  .consult .eyebrow { color: color-mix(in oklab, var(--paper) 85%, var(--red)); }
  .consult h2 { color: var(--paper); font-size: var(--t-xl); margin-block: var(--s-sm); }
  .consult p { color: color-mix(in oklab, var(--paper) 90%, transparent); margin-block-end: var(--s-lg); }
  .consult__ctas { display: flex; gap: var(--s-sm); justify-content: center; flex-wrap: wrap; }
  .consult .btn { --bg: var(--paper); --fg: var(--red); &::before { background: var(--ink); } &:hover { --fg: var(--paper); } }
  .consult .btn--line { --bg: transparent; --fg: var(--paper); box-shadow: inset 0 0 0 1.5px var(--paper);
    &::before { background: var(--paper); } &:hover { --fg: var(--red); } }
}