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

body {
  margin: 0;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

/* =====================================
   Layout
===================================== */

.site {
  position: relative;
  z-index: 3;   /* 紙（2）より上。本文は紙をかぶらない */

  width: 100%;
  margin: 0;
  padding: 0 var(--space-md) clamp(40px, 5vw, 72px);
}

/* =====================================
   Header
===================================== */

.hero {
  position: relative;
  z-index: 2;

  padding-top: 48px;
}

.archive-home::before {
  content: "";
  position: fixed;
  inset: 0;

  background-image: url("../assets/texture/paper06-max.webp");
  background-size: cover;
  background-position: center;

opacity: 0;
filter: brightness(1.08) contrast(0.9) blur(0.4px);

pointer-events: none;

/* ロゴ（z-index 1）とキャラクター（z-index 0）より上に置き、乗算で重ねる。
   本文（.site）はさらに上なので、読みやすさは損なわれない。 */
z-index: 2;
mix-blend-mode: multiply;

animation: paperReveal 1.2s ease-out forwards;
animation-delay: 0.05s;
}

.archive-home {
  position: relative;
}

.top-character {
  position: fixed;
  inset: 0;
  z-index: 0;

  display: block;
  overflow: hidden;
  pointer-events: none;
}

.top-character-image {
  position: absolute;
  top: -64px;
  right: -275px;

  width: 620px;
  max-width: none;
  height: auto;
}

@media (min-width: 600px) {
  .top-character-image {
    top: -140px;
    right: -240px;

    width: 1008px;
  }
}

/* =====================================
   Archive Entry
===================================== */

/* 仕上がりの外側。トンボはここに立つ。
   印刷の記号を札の中へ入れると事務書類の顔になるので、
   中はコピーとラフだけに保ち、記号は断ち落とし側にだけ置く。 */
.archive-sheet {
  position: relative;
  z-index: 2;
  width: min(440px, 100%);
  margin-top: 68px;   /* 下に固定ポストと帯が入るぶん、札を上へ寄せる */
  padding: 17px;

  /* 見出しの版ズレ量。触れると 0 に寄って版が合う。
     @property で <length> の型を付けているので、距離そのものを補間できる。 */
  --plate-shift: 0.9px;
  transition: --plate-shift 620ms cubic-bezier(0.22, 1, 0.36, 1);
}

.archive-sheet:hover,
.archive-sheet:focus-within,
.archive-sheet:active {
  --plate-shift: 0px;
}

/* =====================================
   ページ間の遷移
   札から一覧へ移るとき、切り替わるのではなく札そのものが面へ変形する。
   色校の紙が刷り上がった面になる、というモチーフをそのまま動きにする。
   対応していないブラウザではただの遷移になるだけで、何も壊れない。
===================================== */

@view-transition {
  navigation: auto;
}

.archive-entry {
  view-transition-name: archive-sheet;
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none;
  }
}

.archive-entry-shadow {
  position: relative;
  z-index: 2;
  width: 100%;

  filter:
    drop-shadow(0 4px 3px rgba(47, 44, 41, 0.09))
    drop-shadow(0 14px 18px rgba(47, 44, 41, 0.13));

  transition: filter 0.35s ease;
}

.archive-entry {
  position: relative;
  display: block;
  width: 100%;
  padding: 16px 20px 18px;

  overflow: hidden;

  color: var(--color-text);
  background: rgba(47, 44, 41, 0.34);

  scale: 0.95;
  transform-origin: left top;

  /* 左上を起点に0.95倍しているぶん、右と下にだけ5%の隙間が残り、
     トンボの中心からずれる。縮んだ量の半分だけ送って中心に合わせる。
     translate は transform より先に効くので、ホバーの translateX(4px) とは
     ぶつからない（触れたときに中心から外れるのは意図どおり）。 */
  translate: 2.5% 2.5%;

  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;

  transition:
    background-color 0.35s ease,
    transform 0.35s ease;
}

.archive-entry::before,
.archive-entry::after {
  content: "";
  position: absolute;
  inset: 1px;

  pointer-events: none;
  z-index: 0;
}

.archive-entry::before {
  /* 紙をわずかに透かして、札が浮かずに面へ沈むようにする */
  background: rgba(255, 255, 255, 0.8);

  transition: background-color 0.35s ease;
}

.archive-entry::after {
  background-image: url("../assets/rough/rough-touhou02-display-max.webp");
  background-position: 88% 44%;
  background-repeat: no-repeat;
  background-size: 224% auto;

  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0 28%,
    rgba(0, 0, 0, 0.14) 46%,
    rgba(0, 0, 0, 0.66) 72%,
    #000 100%
  );
  mask-image: linear-gradient(
    90deg,
    transparent 0 28%,
    rgba(0, 0, 0, 0.14) 46%,
    rgba(0, 0, 0, 0.66) 72%,
    #000 100%
  );
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;

  transition: filter 0.35s ease;
}

.archive-entry > * {
  position: relative;
  z-index: 1;
}

/* =====================================
   トンボ
   漫画原稿用紙と同じ取り方で、四隅の角トンボと、各辺の中央の
   センタートンボを立てる。線は純黒ではなく帯と同じマゼンタ寄りの黒。
   純黒は書類の色になる。
===================================== */

.sheet-marks {
  position: absolute;
  inset: 0;

  color: rgba(56, 48, 56, 0.62);
  pointer-events: none;
}

.sheet-marks i {
  position: absolute;
  display: block;
}

.sheet-marks i::before,
.sheet-marks i::after {
  content: "";
  position: absolute;
  background: currentColor;
}

/* --- 角トンボ。二本線のL字を、仕上がりの角の外に置く --- */

.sheet-corner {
  width: 16px;
  height: 16px;
}

.sheet-corner::before {
  left: 0;
  right: 0;
  height: 1px;
  box-shadow: 0 4px 0 0 currentColor;   /* 内側のもう一本 */
}

.sheet-corner::after {
  top: 0;
  bottom: 0;
  width: 1px;
  box-shadow: 4px 0 0 0 currentColor;
}

.sheet-corner--tl { top: 0; left: 0; }
.sheet-corner--tr { top: 0; right: 0; transform: scaleX(-1); }
.sheet-corner--bl { bottom: 0; left: 0; transform: scaleY(-1); }
.sheet-corner--br { bottom: 0; right: 0; transform: scale(-1); }

/* --- センタートンボ。辺の中央に、仕上がり線をまたぐ十字を置く --- */

.sheet-center--t,
.sheet-center--b {
  left: 50%;
  width: 13px;
  height: 16px;
  margin-left: -6.5px;
}

.sheet-center--l,
.sheet-center--r {
  top: 50%;
  width: 16px;
  height: 13px;
  margin-top: -6.5px;
}

.sheet-center--t { top: 0; }
.sheet-center--b { bottom: 0; }
.sheet-center--l { left: 0; }
.sheet-center--r { right: 0; }

/* 辺に対して垂直な長い線 */
.sheet-center--t::before,
.sheet-center--b::before {
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
}

.sheet-center--l::before,
.sheet-center--r::before {
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
}

/* 仕上がり線の位置で交わる短い線 */
.sheet-center--t::after,
.sheet-center--b::after {
  left: 0;
  right: 0;
  height: 1px;
}

.sheet-center--t::after { bottom: 0; }
.sheet-center--b::after { top: 0; }

.sheet-center--l::after,
.sheet-center--r::after {
  top: 0;
  bottom: 0;
  width: 1px;
}

.sheet-center--l::after { right: 0; }
.sheet-center--r::after { left: 0; }

/* =====================================
   ひとこと
   仕上がりの外——色校の余白に書き添える。断ち落とされる領域は
   作っている人が書き込む場所なので、外向きの面を汚さずに私信の調子が出る。

   絶対配置にはしない。文面が伸びたぶんは枠ごと下へ伸ばし、
   札には食い込ませない（トンボは枠の四隅にあるので一緒に下がる）。
===================================== */

.sheet-note {
  display: flex;
  align-items: baseline;
  gap: 11px;

  width: fit-content;
  max-width: 100%;
  margin-top: 13px;
  padding: 8px 12px;

  /* 紙にK25を敷いた色を、55%で透かす。黒ではなくグレーを透かしているので、
     紙の上でも絵の上でもこの色へ寄る（黒だと暗くする方向にしか働かない）。
     濃い地に白抜きにすると、ひとことが札より強く見えてしまうため、
     薄く敷いて今の文字色のまま残し、下地の顔に留めている。
     帯の白半透明とも性格が分かれる（帯＝白、ひとこと＝グレー）。 */
  background: rgba(185, 182, 177, 0.55);
  /* 一行のときの高さの半分（約18.5px）より小さくしておく。
     超えるとピル型に丸められ、二行になったときだけ角の表情が変わる。 */
  border-radius: 14px;
}

/* 日付は枠に入れてわずかに傾ける。押した物の顔になり、
   事務の書式ではなく手の側に寄る。 */
.sheet-note time {
  flex: none;

  padding: 4px 7px 3px;
  border: 1px solid rgba(56, 48, 56, 0.5);

  /* 地を敷いたぶん、日付は本文と同じ濃さまで上げる。
     0.72 のままだとグレーの上で沈む。 */
  color: rgba(56, 48, 56, 0.86);
  font-family: var(--font-label);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1;

  rotate: -1.6deg;
}

/* 本文は「ようこそ」と404で使っている、話しかける声。
   flex の子なので、折り返した二行目も日付の右で頭が揃う。
   文面は長くとも二行に収めること。 */
.sheet-note p {
  margin: 0;

  color: rgba(47, 44, 41, 0.86);
  font-family: var(--font-welcome);
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.55;
}

/* =====================================
   見出しの版ズレ
   ロゴのCMY版が合わさるのと同じ語彙を、札にも通す。
   ふだんはシアンとマゼンタの版がわずかに開いていて、
   触れると合う。白い四角形が「押せる物」に見えないという
   弱さを、色の変化で補う役目も持たせている。
===================================== */

@property --plate-shift {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}

.archive-entry h2 {
  position: relative;
  isolation: isolate;
}

.archive-entry h2::before,
.archive-entry h2::after {
  /* スラッシュの後ろは読み上げ用の代替テキスト。空にしておかないと、
     版の複製ぶん見出しが繰り返し読まれる。目には出ないが耳には出る。 */
  content: attr(data-text) / "";
  position: absolute;
  inset: 0;

  mix-blend-mode: multiply;
  pointer-events: none;
}

.archive-entry h2::before {
  color: rgba(0, 158, 224, 0.5);
  transform: translate(
    calc(var(--plate-shift) * -1),
    calc(var(--plate-shift) * -0.6)
  );
}

.archive-entry h2::after {
  color: rgba(228, 0, 127, 0.42);
  transform: translate(
    var(--plate-shift),
    calc(var(--plate-shift) * 0.6)
  );
}

@media (prefers-reduced-motion: reduce) {
  .archive-sheet {
    transition: none;
  }
}

.archive-label {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1;
  letter-spacing: 0.2em;
}

.archive-entry h2 {
  margin: 2px 0 0;
  font-family: var(--font-serif);
  font-size: 1.9rem;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.02em;
  transform: scaleX(0.95);
  transform-origin: left center;
}

.archive-entry h2 + p {
  margin-top: 8px;
  font-size: 0.85rem;
  line-height: 1.9;
  opacity: 0.7;
}

.archive-entry-cue {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;

  margin-top: 14px;
  padding-top: 9px;

  border-top: 1px solid rgba(47, 44, 41, 0.14);

  /* 帯やトンボと同じ丸ゴシックの太字。押せる場所であることを、
     本文の書体から離すことで示す。 */
  font-family: var(--font-label);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.12em;
}

/* 矢印は「閲覧する」の書体をそのまま継ぐ。Kosugi のままにすると、
   700 を継承しても Kosugi に太字が無いので擬似ボールドになる。 */
.archive-entry-arrow {
  display: inline-block;

  transition: transform 0.35s ease;
}

.archive-entry-shadow:hover {
  filter:
    drop-shadow(0 6px 4px rgba(47, 44, 41, 0.1))
    drop-shadow(0 18px 22px rgba(47, 44, 41, 0.15));
}

.archive-entry:hover {
  transform: translateX(4px);
  background: rgba(47, 44, 41, 0.46);
}

.archive-entry:hover::before {
  background: rgba(250, 248, 243, 0.88);
}

.archive-entry:hover::after {
  filter:
    brightness(0.98)
    contrast(1.08);
}

.archive-entry:hover .archive-entry-arrow {
  transform: translateX(5px);
}

.archive-entry-shadow:active {
  filter:
    drop-shadow(0 2px 2px rgba(47, 44, 41, 0.08))
    drop-shadow(0 6px 7px rgba(47, 44, 41, 0.09));
}

.archive-entry:active {
  transform: translate(2px, 2px) scale(0.995);
  background: rgba(47, 44, 41, 0.4);
}

/* --- つまみ上げた状態 ---------------------------------------------------
   押し込み（クリック）は沈む。引きずり（ドラッグ）は浮く。
   同じ :active でも意味が違うので、動かしたかどうかを js/card-lift.js が
   見分けてこの状態にする。紙の上に置かれた札という設定を、
   持ち上がる影で裏づける。 */
.archive-entry-shadow.is-lifted {
  filter:
    drop-shadow(0 10px 7px rgba(47, 44, 41, 0.12))
    drop-shadow(0 30px 36px rgba(47, 44, 41, 0.2));
}

.archive-entry-shadow.is-lifted .archive-entry {
  transform: translateX(4px) scale(1.014);
  background: rgba(47, 44, 41, 0.46);
}

/* ドラッグ中にブラウザ既定のリンク引きずり（URLの影）が出ると、
   持ち上がりの表現と競合するので止める。 */
.archive-entry {
  -webkit-user-drag: none;
}

@media (prefers-reduced-motion: reduce) {
  .archive-entry-shadow.is-lifted .archive-entry {
    transform: translateX(4px);
  }
}

.archive-entry:focus-visible {
  outline: 2px solid rgba(47, 44, 41, 0.72);
  outline-offset: 4px;
}

/* =====================================
   Links — 中の人 / 外部
   売り込みではなく「そういえば、ここにもいます」という佇まい。
   記号や色を使わず、文字の大きさと余白だけで置く。
===================================== */

/* --- 固定ポストの置き場 ------------------------------------------------
   札と帯のあいだ。埋め込みが入るまでは枠だけ見せている。 */
/* Xの埋め込みは横に広げても縮まない。媒体側の上限でゆったり組ませてから
   80%に縮め、札と同じ幅に収める。倍率と高さは js/feed-scale.js が渡す。 */
.site-feed {
  width: min(440px, 100%);
  margin-top: clamp(28px, 3.5vw, 40px);
}

.site-feed-inner {
  width: 550px;
  transform-origin: top left;
}

/* 幅が狭い画面では縮めず、その幅のまま組ませる */
@media (max-width: 767px) {
  .site-feed-inner {
    width: 100%;
  }
}

/* 埋め込みが差し替わる前、あるいは読み込めなかったときの見え方。
   広告の抜け殻に見えないよう、ただのリンクとして置いておく。 */
.site-feed .twitter-tweet {
  margin: 0;
  padding: 14px 16px;

  background: rgba(255, 255, 255, 0.42);
  box-shadow: inset 0 0 0 1px rgba(47, 44, 41, 0.12);

  font-family: var(--font-label);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
}

/* 差し替え後は widgets.js が iframe を入れる。枠は外す。 */
.site-feed .twitter-tweet-rendered {
  padding: 0;
  background: none;
  box-shadow: none;
}

/* --- 左へ抜ける帯 ------------------------------------------------------
   「TOPへ戻る」と同じ語彙。左端まで貫通させ、ここから外へ出ることを
   地の形で示す。記号や色ではなく、位置で意味を持たせている。

   地は網点でつくる。ロゴのプレートと同じ語彙で、濃度を点の粗密で表す。
   帳票がベタの面なのに対し、帯は網。刷り分けの関係で性格を割っている。 */
.site-bands {
  /* 値はスマホの実機で詰めた。PCで最適でもスマホで見づらければ意味がないので、
     狭い画面での見やすさを優先して一組に決めてある。 */
  --band-alpha: 0.9;      /* インクの濃さ */
  --band-fade: 220px;     /* 右へ消えていく幅 */
  --band-pad-r: 168px;    /* 文字の右にとる余白 */
  --band-pad-y: 7px;
  --band-dot: 3px;        /* 網点の間隔 */
  --band-dot-r: 1.3px;    /* 網点の大きさ */
  --band-angle: 22.5deg;  /* 網の角度。0度と45度は目が立つので避けている */

  display: grid;
  justify-items: start;
  gap: 10px;

  margin-top: clamp(22px, 2.8vw, 32px);
}

.site-band {
  position: relative;
  overflow: hidden;

  display: inline-flex;
  align-items: center;
  gap: 10px;

  /* 要素自体を画面外まで伸ばす。::before で継ぐと、左の延長ぶんに
     マスクが効かず消えぎわが作れない。 */
  margin-left: calc(-100vw - var(--space-md));
  padding:
    var(--band-pad-y)
    var(--band-pad-r)
    var(--band-pad-y)
    calc(100vw + var(--space-md) * 2);

  /* グレー80%。ただし中性グレーではなくマゼンタ寄りの黒。
     紙の地が #F7F3EC（青が11低い＝Y寄り）なので、同程度の量を
     マゼンタ側へ振って釣り合わせている（G を R・B より8低く）。 */
  color: rgb(56, 48, 56);
  font-family: var(--font-label);
  font-size: 0.912rem;      /* スマホの実機で詰めた値 */
  font-weight: 700;
  letter-spacing: 0.138em;  /* 0.15em にトラッキング -12（-0.012em） */
  line-height: 1;
}

/* 文字は必ず網の上に置く */
.band-label,
.site-band > a,
.site-band > span:not(.band-ink) {
  position: relative;
  z-index: 1;
}

/* インクの層。消えぎわのマスクはここが持つので、
   中の網点を回しても消える向きは変わらない。 */
.band-ink {
  position: absolute;
  inset: 0;
  z-index: 0;

  overflow: hidden;
  pointer-events: none;

  -webkit-mask-image: linear-gradient(to left, transparent 0, #000 var(--band-fade));
  mask-image: linear-gradient(to left, transparent 0, #000 var(--band-fade));

  animation: bandDraw 900ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.site-band:nth-child(2) .band-ink {
  animation-delay: 120ms;
}

/* 網点。ロゴのプレートと同じく、大きく取って回す。

   幅は帯の幅を基準にとる。帯は左へ 100vw はみ出しているので中心が画面外にあり、
   130vw のように画面幅で決めると、狭い画面では網の右端が帯の右端まで届かず、
   いちばん右の文字（Melonbooks）の下から網が消える。
   高さは回した網が帯の端まで届くのに要る量で、帯の幅にも効いてくる。 */
.band-ink::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;

  width: 130%;
  height: calc(90vh + 40vw);

  background-image: radial-gradient(
    circle at center,
    rgba(255, 255, 255, var(--band-alpha)) 0 var(--band-dot-r),
    transparent calc(var(--band-dot-r) + 0.6px)
  );
  background-size: var(--band-dot) var(--band-dot);

  transform: translate(-50%, -50%) rotate(var(--band-angle));
  transform-origin: center;
}

/* ローラーが通るように、左から刷られて現れる */
@keyframes bandDraw {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}

@media (prefers-reduced-motion: reduce) {
  .band-ink { animation: none; }
}

/* 動くのは文字だけ。帯は刷られた地なので動かさない。 */
.band-label {
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.site-band--about:hover .band-label,
.site-band--about:focus-visible .band-label {
  transform: translateX(-4px);
}

@media (prefers-reduced-motion: reduce) {
  .site-band--about:hover .band-label,
  .site-band--about:focus-visible .band-label {
    transform: none;
  }
}

.site-band--external a {
  padding: 2px 0;
  border-bottom: 1px solid transparent;

  /* 帯そのものが左へ抜けるのと同じ語彙。行き先ごとに個別に動かす。 */
  transition:
    color 0.3s ease,
    border-color 0.3s ease,
    transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.site-band--external a:hover,
.site-band--external a:focus-visible {
  color: rgb(38, 30, 38);
  border-color: currentColor;
  transform: translateX(-4px);
}

@media (prefers-reduced-motion: reduce) {
  .site-band--external a:hover,
  .site-band--external a:focus-visible {
    transform: none;
  }
}

.site-band--external > span:not(.band-ink) {
  /* 網の傾き（22.5度）とスラッシュの傾きが近く、そのままだと埋もれる。
     大きさと濃さを上げて拾えるようにしている。 */
  font-size: 1.2em;
  opacity: 0.72;
}

.site-band a:focus-visible,
a.site-band:focus-visible {
  outline: 2px solid rgba(47, 44, 41, 0.72);
  outline-offset: 3px;
}

@keyframes paperReveal {
  0% {
    opacity: 0;
    filter: brightness(1.08) contrast(0.9) blur(0.4px);
  }

  35% {
    opacity: 0.28;
  }

  100% {
    opacity: 0.5;
    filter: brightness(1) contrast(1.06) blur(0);
  }
}

/* =====================================
   Opening — Logo
===================================== */

.site-logo-stage {
  position: fixed;
  inset: 0;

  overflow: hidden;

  pointer-events: none;
  z-index: 1;
}

.site-logo-plate {
  --plate-opacity: 0.22;

  position: absolute;
  top: calc(47% - 40px);
  left: 0;

  width: 560px;
  aspect-ratio: 1355.09 / 391.49;
  
-webkit-mask-image: url("../assets/logo/logo.svg");
mask-image: url("../assets/logo/logo.svg");
  
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;

  -webkit-mask-position: center;
  mask-position: center;

  -webkit-mask-size: contain;
  mask-size: contain;

  opacity: 0;

  transform:
    translate(-40%, -50%)
    rotate(-90deg);
  
  transform-origin: center;

   mix-blend-mode: multiply;
  filter: blur(3.5px);

  overflow: hidden;
  z-index: 0;
}

.site-logo-plate::before {
  content: "";
  position: absolute;

  top: 50%;
  left: 50%;

  width: 180%;
  aspect-ratio: 1 / 1;

  background-image:
    radial-gradient(
      circle,
      currentColor 0 1.3px,
      transparent 1.5px
    );

  background-size: 3.8px 3.8px;
  background-repeat: repeat;

}

.site-logo-plate--magenta::before {
  transform:
    translate(-50%, -50%)
    rotate(108deg);

    transform-origin: center;

}

.site-logo-plate--yellow::before {
  transform:
    translate(-50%, -50%)
    rotate(162deg);
}

.site-logo {
  --logo-k-opacity: 1;

  position: absolute;
  top: calc(47% - 40px);
  left: 0;

  width: 560px;
  max-width: none;
  height: auto;

  opacity: 0;
  filter: blur(8px);

  transform:
    translate(-40%, -50%)
    rotate(-90deg);

  transform-origin: center;

  animation:
    plateBlackSolidResolve 1s
    linear
    0.35s
    both;

  z-index: 2;
}

/* =====================================
   Opening — Message
===================================== */

.hero-title {
  margin: 0;
  font-family: var(--font-welcome);
  font-size: 1.48rem;
  font-weight: 500;
  line-height: 1.6;
  
   animation: messageInkSettle 0.9s ease-out both;
  animation-delay: 0.42s;
}

.hero-message {
  margin-top: 12px;
  font-size: 0.9rem;
  line-height: 1.9;

  animation: messageInkSettle 0.9s ease-out both;
  animation-delay: 0.52s;
}

.hero-message span {
  display: block;
}

@keyframes messageInkSettle {
  0% {
    opacity: 0.2;
    filter:
      blur(2px)
      contrast(0.68);
  }

  65% {
    opacity: 0.92;
    filter:
      blur(0.25px)
      contrast(1.03);
  }

  100% {
    opacity: 1;
    filter:
      blur(0)
      contrast(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .archive-home::before,
  .hero-message,
  .archive-entry {
    animation: none;
  }

  .archive-home::before {
    opacity: 0.18;
    filter: none;
  }

  .archive-entry,
  .archive-entry-shadow,
  .archive-entry-arrow {
    transition: none;
  }
}


/* 狭い画面では文字の右の余白を詰める。164px のままだと帯が画面の外まで
   伸びて横スクロールが出る。消えぎわも幅に合わせて縮めないと、
   短くなった帯の中で文字が薄れてしまう。 */
/* 帯は狭い画面でも同じ値で組む。以前は画面幅ごとに余白と消えぎわを
   切り替えていたが、実機で詰めた結果ひと組で足りることが分かったので外した。

   帯は元々右へ消えていく意匠なので、画面の外へ抜けること自体は
   断ち切りとして正しい。横に流れるのだけを止める。
   hidden ではなく clip を使うのは、スクロール枠を作らせないため。 */
html {
  overflow-x: clip;
}

@media (max-width: 767px) and (hover: none) and (pointer: coarse) {
.site-logo {
  --logo-k-opacity: 1;

  top: calc(47% - 40px);
  left: 0;

  width: 560px;
  opacity: 0;

  transform:
    translate(-40%, -50%)
    rotate(-90deg);
}
  
  .site-logo-plate {
    --plate-opacity: 0.18;

    top: calc(47% - 40px);
    left: 0;

    width: 560px;
    opacity: var(--plate-opacity);

    transform:
      translate(-40%, -50%)
      rotate(-90deg);
  }

  .site-logo-plate::before {
    background-size: 3.4px 3.4px;
  }
}

@media (max-width: 767px) {
  .hero-title {
    font-size: 1.26rem;
  }

  .hero-message {
    font-size: 0.86rem;
  }

  .archive-entry {
    padding: 14px 16px 16px;
  }

}

/* C版・M版・Y版はすべて同じ基準位置 */

/* =====================================
   CMY plate offset
===================================== */

.site-logo-plate--cyan {
    color: rgb(0 158 194);

  transform:
    translate(
      calc(-40% - 32px),
      calc(-50% - 22px)
    )
    rotate(-90deg);

animation:
  plateCyanGather 1.85s
    cubic-bezier(0.22, 1, 0.36, 1)
    0.2s
    both,

  plateColorReveal 1.15s
    cubic-bezier(0.22, 1, 0.36, 1)
    0.2s
    both,

  plateColorFadeOut 0.8s
    cubic-bezier(0.22, 1, 0.36, 1)
    1.85s
    forwards;
}

@keyframes plateCyanGather {
  0% {
    transform:
      translate(
        calc(-40% - 32px),
        calc(-50% - 22px)
      )
      rotate(-90deg);
  }

  100% {
    transform:
      translate(-40%, -50%)
      rotate(-90deg);
  }
}

.site-logo-plate--magenta {
    color: rgb(210 0 105);

  transform:
    translate(
      calc(-40% + 30px),
      calc(-50% - 8px)
    )
    rotate(-90deg);

animation:
  plateMagentaGather 1.85s
    cubic-bezier(0.22, 1, 0.36, 1)
    0.35s
    both,

  plateColorReveal 1.15s
    cubic-bezier(0.22, 1, 0.36, 1)
    0.35s
    both,

  plateColorFadeOut 0.8s
    cubic-bezier(0.22, 1, 0.36, 1)
    1.85s
    forwards;
}

@keyframes plateMagentaGather {
  0% {
    transform:
      translate(
        calc(-40% + 30px),
        calc(-50% - 8px)
      )
      rotate(-90deg);
  }

  100% {
    transform:
      translate(-40%, -50%)
      rotate(-90deg);
  }
}

.site-logo-plate--yellow {
    color: rgb(225 190 0);

  transform:
    translate(
      calc(-40% - 8px),
      calc(-50% + 32px)
    )
    rotate(-90deg);

animation:
  plateYellowGather 1.85s
    cubic-bezier(0.22, 1, 0.36, 1)
    0.5s
    both,

  plateColorReveal 1.15s
    cubic-bezier(0.22, 1, 0.36, 1)
    0.5s
    both,

  plateColorFadeOut 0.8s
    cubic-bezier(0.22, 1, 0.36, 1)
    1.85s
    forwards;
}

@keyframes plateYellowGather {
  0% {
    transform:
      translate(
        calc(-40% - 8px),
        calc(-50% + 32px)
      )
      rotate(-90deg);
  }

  100% {
    transform:
      translate(-40%, -50%)
      rotate(-90deg);
  }
}

@keyframes plateColorFadeOut {
  0% {
    opacity: var(--plate-opacity);
    filter: blur(0.8px);
  }

  20% {
    opacity: calc(var(--plate-opacity) * 0.92);
    filter: blur(1.2px);
  }

  65% {
    opacity: calc(var(--plate-opacity) * 0.5);
    filter: blur(2px);
  }

  100% {
    opacity: 0;
    filter: blur(3.5px);
  }
}

@keyframes plateBlackSolidResolve {
  0% {
    opacity: 0;
    filter: blur(8px);
  }

  1% {
    visibility: visible;
    opacity: 0;
    filter: blur(8px);
  }

  18% {
    opacity: calc(var(--logo-k-opacity) * 0.18);
    filter: blur(7px);
  }

  42% {
    opacity: calc(var(--logo-k-opacity) * 0.58);
    filter: blur(4px);
  }

  72% {
    opacity: calc(var(--logo-k-opacity) * 0.92);
    filter: blur(1.4px);
  }

  100% {
      visibility: visible;
    opacity: var(--logo-k-opacity);
    filter: blur(0);
  }
}

@keyframes plateColorReveal {
  0% {
    opacity: 0;
  }

  100% {
    opacity: var(--plate-opacity);
  }
}