:root{
  color-scheme: dark;

  --ink:       #0A0B0F;
  --navy:      #222942;
  --navy-deep: #161B2C;
  --rose:      #906973;
  --rose-lit:  #CFA3AA;

  --white: #FFFFFF;
  --soft:  rgba(255,255,255,0.66);
  --faint: rgba(255,255,255,0.40);
  --line:  rgba(255,255,255,0.14);

  --jp:    "Noto Sans JP", "Hiragino Sans", "Yu Gothic", system-ui, sans-serif;
  --latin: "Jost", "Noto Sans JP", "Hiragino Sans", sans-serif;

  --t-h2:  clamp(1.5rem, 5.5vw, 3.2rem);
  --gutter: clamp(1.25rem, 5vw, 5rem);
}

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

html{ scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body{
  margin: 0;
  background: var(--ink);
  color: var(--soft);
  font-family: var(--jp);
  font-weight: 300;
  font-size: 0.95rem;
  line-height: 1.95;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* 日本語を文節で折り返す（「担当して／います。」のような途中改行を防ぐ）。
     最終行が1〜2文字だけ残るのも避ける */
  word-break: auto-phrase;
  text-wrap: pretty;
}
body[data-menu="open"]{ overflow: hidden; }

img{ display: block; max-width: 100%; }
a{ color: inherit; text-decoration: none; }
:focus-visible{ outline: 1px solid var(--rose-lit); outline-offset: 3px; }

/* ── 共通 ──────────────────────────── */

.latin{
  font-family: var(--latin);
  font-weight: 200;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}


.link{
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(255,255,255,0.3);
  text-underline-offset: 0.3em;
  transition: color 0.3s, text-decoration-color 0.3s;
}
.link:hover{ color: var(--rose-lit); text-decoration-color: var(--rose-lit); }

.sec{
  padding: clamp(4.5rem, 11vw, 9rem) var(--gutter);
  position: relative;
}
/* レールの直後など、上の余白を詰めたいセクション */
.sec--tight{ padding-top: 0; }
.sec--navy{ background: var(--navy-deep); }
.sec--rose{ background: var(--rose); }
/* ピンク地は明度が上がるぶん文字の白を強めてコントラストを確保する */
.sec--rose{ --line: rgba(255,255,255,0.28); --faint: rgba(255,255,255,0.7); --soft: rgba(255,255,255,0.96); }
/* くすみピンクの帯では入力欄・リンクの見え方を反転させる */
.sec--rose input,
.sec--rose textarea,
.sec--rose select{
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.42);
}
.sec--rose input:focus,
.sec--rose textarea:focus,
.sec--rose select:focus{
  border-color: var(--white);
  background: rgba(255,255,255,0.2);
}
.sec--rose ::placeholder{ color: rgba(255,255,255,0.6); }
.sec--rose button.send{ background: var(--white); border-color: var(--white); color: var(--rose); }
.sec--rose button.send:hover{ background: rgba(255,255,255,0.86); border-color: rgba(255,255,255,0.86); }
.sec--rose .sent{ color: var(--white); }
.sec--rose .link{ text-decoration-color: rgba(255,255,255,0.5); }
.sec--rose .link:hover{ color: var(--white); text-decoration-color: var(--white); }
.sec--rose .more{ border-color: rgba(255,255,255,0.42); }
.sec--rose .more:hover{ border-color: var(--white); background: rgba(255,255,255,0.12); }

.sec-head{ margin-bottom: clamp(2.2rem, 5vw, 3.6rem); }
.sec-head h2{
  font-family: var(--latin);
  font-weight: 200;
  font-size: var(--t-h2);
  letter-spacing: 0.14em;
  color: var(--white);
  margin: 0.5rem 0 0;
  line-height: 1.2;
}
.sec-head .jp{
  margin: 0.9rem 0 0;
  font-size: 0.86rem;
  font-weight: 300;
  letter-spacing: 0.04em;
  color: var(--soft);
  max-width: 40em;
}
.note{
  margin: 1.4rem 0 0;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.9;
  color: var(--faint);
}

.count{
  font-family: var(--latin);
  font-weight: 300;
  font-size: 0.66rem;
  letter-spacing: 0.24em;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}

/* ── ヘッダー（ホームは右上のタブのみ） ── */

.bar{
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem var(--gutter);
  pointer-events: none;
  transition: background 0.5s ease;
}
.bar[data-stuck="true"]{
  background: linear-gradient(180deg, rgba(10,11,15,0.88), rgba(10,11,15,0));
}
.bar a, .bar button{ pointer-events: auto; }

.brand{
  font-family: var(--latin);
  font-weight: 200;
  font-size: 0.9rem;
  letter-spacing: 0.24em;
  color: var(--white);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.bar[data-stuck="true"] .brand{ opacity: 1; transform: none; }

.tabs{
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0.6rem 0.2rem;
  margin-left: auto;
  cursor: pointer;
  display: grid;
  gap: 6px;
  width: 34px;
}
.tabs i{
  display: block;
  height: 1px;
  background: var(--white);
  transition: transform 0.4s cubic-bezier(0.2,0.8,0.3,1), opacity 0.3s;
}
.tabs i:nth-child(2){ width: 76%; margin-left: auto; }
body[data-menu="open"] .tabs i:nth-child(1){ transform: translateY(7px) rotate(11deg); }
body[data-menu="open"] .tabs i:nth-child(2){ opacity: 0; }
body[data-menu="open"] .tabs i:nth-child(3){ transform: translateY(-7px) rotate(-11deg); }

/* ── メニュー ─────────────────────── */

.menu{
  position: fixed;
  inset: 0;
  z-index: 55;
  /* 先方要望（2026-07-31）: メニュー画面はグラデーションをやめて黒ベタ。ネイビーのグラデはPROFILEに残す */
  background: var(--ink);
  display: grid;
  align-content: center;
  padding: 5.5rem var(--gutter) 3rem;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s ease, visibility 0.45s;
}
body[data-menu="open"] .menu{ opacity: 1; visibility: visible; }

.menu ul{ list-style: none; margin: 0; padding: 0; }
.menu li{
  border-top: 1px solid var(--line);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
body[data-menu="open"] .menu li{ opacity: 1; transform: none; }
.menu li:nth-child(1){ transition-delay: 0.08s }
.menu li:nth-child(2){ transition-delay: 0.14s }
.menu li:nth-child(3){ transition-delay: 0.20s }
.menu li:nth-child(4){ transition-delay: 0.26s }
.menu li:nth-child(5){ transition-delay: 0.32s }
.menu li:nth-child(6){ transition-delay: 0.38s }

.menu a{
  display: flex;
  align-items: baseline;
  gap: 1.2rem;
  padding: clamp(0.55rem, 1.7vh, 1.1rem) 0;
}
.menu a b{
  font-family: var(--latin);
  font-weight: 200;
  font-size: clamp(1.35rem, 4.4vh, 2.6rem);
  letter-spacing: 0.16em;
  color: var(--white);
  transition: opacity 0.3s;
}
.menu a span{
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--faint);
}
.menu a:hover b{ opacity: 0.55; }
.menu-foot{
  margin-top: 2.4rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 2rem;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--faint);
}

/* ── ヒーロー ─────────────────────── */

/* 先方要望（2026-07-31）: 丸く囲うグラデをやめてロゴ画像をベタで使う。HOMEは青の蝶だけ */
.hero{
  position: relative;
  min-height: 100svh;
  display: grid;
  overflow: hidden;
}
.hero-art{
  position: absolute;
  inset: 0;
  background: #202C42;   /* ロゴ画像の地色。余白と画像の境目を消す */
}
.hero-art img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* 縦画面は横に余りすぎるので、蝶を大きく置いて翅の先を画面外へ抜く（社名は切らない） */
@media (orientation: portrait){
  .hero-art img{ width: 145%; max-width: none; left: -22.5%; }
}
/* ロゴ画像に社名が入っているため、見出しは読み上げ用に隠す */
.hero h1{
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
/* ── 実績グリッド（MOVIE） ─────────── */

.grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: clamp(1rem, 2.2vw, 1.6rem);
}
/* ── トップの実績レール（横に流れる） ── */

.rail-sec{ padding: 0 0 clamp(1rem, 3vw, 2rem); }
/* レールが続くので、見出し側の下余白は詰める */
#film{ padding-bottom: clamp(1.6rem, 3.5vw, 2.8rem); }
.rail{
  display: flex;
  gap: clamp(0.8rem, 1.6vw, 1.3rem);
  padding: 0 var(--gutter);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  cursor: grab;
}
.rail::-webkit-scrollbar{ display: none; }
.rail[data-drag="true"]{ cursor: grabbing; }
.rail .card{
  flex: 0 0 clamp(170px, 19vw, 240px);
  /* レール内は流れ続けるので、出現アニメは使わず最初から見せる */
  opacity: 1;
  transform: none;
}
.rail .card-still{ pointer-events: none; }

.card{
  display: block;
  position: relative;
  border: 1px solid var(--line);
  background: linear-gradient(150deg, #1B2138 0%, #0D1019 76%);
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2,0.8,0.3,1), border-color 0.4s, background 0.6s;
}
.card[data-shown="true"]{ opacity: 1; transform: none; }
.card:hover{ border-color: rgba(201,156,163,0.55); background: linear-gradient(150deg, #232B47 0%, #10131E 76%); }

.card-still{
  position: relative;
  aspect-ratio: 1 / 1.414;   /* B判ポスターの比率。横長のキービジュアルもここに収める */
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: var(--ink);
}
.card-still img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: transform 0.9s cubic-bezier(0.2,0.8,0.3,1), filter 0.6s ease;
}
/* 余白を埋める背景。同じ画像を拡大・ぼかして敷く */
.card-still .bg{
  object-fit: cover;
  transform: scale(1.25);
  filter: blur(26px) brightness(0.45) saturate(0.9);
}
/* キービジュアル本体。切らずに全体を見せる */
.card-still .fg{
  object-fit: contain;
  filter: brightness(1.04);
}
.card:hover .card-still .fg{ transform: scale(1.035); filter: brightness(1.14); }
.card-still::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,11,15,0) 72%, rgba(10,11,15,0.55) 100%);
}
/* キービジュアル未受領の作品 */
.card-still .ph{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 1.4rem;
  text-align: center;
  background: linear-gradient(150deg, #1B2138 0%, #0D1019 76%);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.34);
}

.card-body{ padding: 0.95rem 1rem 1.1rem; }
.card-body h3{
  margin: 0;
  font-size: 0.94rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--white);
  letter-spacing: 0.01em;
}
.card-body time{
  display: block;
  margin-top: 0.5rem;
  font-family: var(--latin);
  font-weight: 300;
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}

/* ── カード内の役職クレジット ────────
   ポスターの下に「何を担当したか」を出す（先方要望 2026-08-01） */
.card-body .role{
  margin: 0.45rem 0 0;
  font-size: 0.72rem;
  font-weight: 300;
  line-height: 1.75;
  color: var(--rose-lit);
}
.card-body time{ margin-top: 0.5rem; }
.card-body .soon{
  display: inline-block;
  margin-top: 0.45rem;
  padding: 0.16rem 0.5rem;
  border: 1px solid rgba(207,163,170,0.5);
  border-radius: 999px;
  font-style: normal;
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  color: var(--rose-lit);
}

.etc{
  margin-top: clamp(2rem, 5vw, 3.2rem);
  border-top: 1px solid var(--line);
  padding-top: 1.2rem;
}
.etc h3{
  margin: 0 0 0.9rem;
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  color: var(--white);
}
.etc ul{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.7rem;
}
.etc li{
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.4rem 0.9rem;
  font-size: 0.78rem;
  font-weight: 300;
  color: var(--soft);
}

/* ── 動画タイル（SNS の TikTok / OTHER の YouTube） ──
   サムネイルは各作品の公式アカウントの投稿。押すと元の投稿へ飛ばす */

.tiles{
  display: grid;
  gap: clamp(0.8rem, 2vw, 1.4rem);
}
.tiles--vert{ grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.tiles--wide{ grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

.tile{
  display: block;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.02);
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2,0.8,0.3,1), border-color 0.35s, background 0.35s;
}
.tile[data-shown="true"]{ opacity: 1; transform: none; }
.tile:hover{ border-color: rgba(207,163,170,0.6); background: rgba(255,255,255,0.05); }
.sec--rose .tile:hover{ border-color: var(--white); background: rgba(255,255,255,0.12); }

.tile-shot{
  position: relative;
  overflow: hidden;
  background: var(--ink);
  border-bottom: 1px solid var(--line);
}
.tile[data-kind="tiktok"] .tile-shot{ aspect-ratio: 9 / 16; }
.tile[data-kind="youtube"] .tile-shot{ aspect-ratio: 16 / 9; }
.tile-shot img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: transform 0.9s cubic-bezier(0.2,0.8,0.3,1), filter 0.6s ease;
}
/* 横長・縦長が混ざるので、同じ画像をぼかして敷いた上に全体を収める */
.tile-shot .bg{
  object-fit: cover;
  transform: scale(1.25);
  filter: blur(24px) brightness(0.45);
}
.tile-shot .fg{ object-fit: contain; }
.tile:hover .tile-shot .fg{ transform: scale(1.04); }

.tile-shot .play{
  position: absolute;
  z-index: 2;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 3rem;
  height: 3rem;
  border: 1px solid rgba(255,255,255,0.75);
  border-radius: 999px;
  background: rgba(10,11,15,0.4);
  backdrop-filter: blur(4px);
  transition: background 0.35s, transform 0.35s;
}
.tile-shot .play::after{
  content: "";
  position: absolute;
  left: 54%; top: 50%;
  transform: translate(-50%, -50%);
  border-left: 11px solid var(--white);
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
}
.tile:hover .play{ background: rgba(10,11,15,0.72); transform: translate(-50%, -50%) scale(1.08); }

.tile-body{ padding: 0.8rem 0.9rem 1rem; }
.tile-body h3{
  margin: 0;
  font-size: 0.82rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--white);
}
.tile-sub{
  margin: 0.3rem 0 0;
  font-size: 0.68rem;
  font-weight: 300;
  line-height: 1.7;
  color: var(--faint);
  /* キャプションが長いので2行で止める */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.tile-body time{
  display: block;
  margin-top: 0.45rem;
  font-family: var(--latin);
  font-weight: 300;
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}

/* ── 映像リンクの無い実績（OTHER 内の一覧） ── */

.plain{ list-style: none; margin: 0; padding: 0; }
.plain li{
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3rem 1rem;
  border-top: 1px solid var(--line);
  padding: 0.7rem 0;
  font-size: 0.84rem;
}
.plain li b{ font-weight: 400; color: var(--white); }
.plain li span{ font-size: 0.72rem; color: var(--soft); }
.plain li time{
  margin-left: auto;
  font-family: var(--latin);
  font-weight: 300;
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}

/* ── CLIENTS ─────────────────────── */

/* セクション同士の境目（黒地が続くところ） */
.sec--rule{ border-top: 1px solid var(--line); }
.sub-block{ margin-top: clamp(2.4rem, 5vw, 3.6rem); }
.sub-block .sub-block h3{
  margin: 0 0 0.4rem;
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  color: var(--white);
}

.clients{
  list-style: none;
  display: flex;
  flex-wrap: nowrap;
  gap: 0.7rem;
  /* セクションの余白を打ち消して画面端まで流す */
  margin: 0 calc(var(--gutter) * -1);
  padding: 0 var(--gutter);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  cursor: grab;
}
.clients::-webkit-scrollbar{ display: none; }
.clients[data-drag="true"]{ cursor: grabbing; }
.clients li{
  flex: none;
  border: 1px solid var(--line);
  padding: 0.6rem 1.1rem;
  font-size: 0.82rem;
  font-weight: 300;
  letter-spacing: 0.04em;
  white-space: nowrap;
  color: var(--white);
  transition: border-color 0.3s;
}
.clients li:hover{ border-color: rgba(207,163,170,0.5); }

/* ── PROFILE ─────────────────────── */

.profile{ display: grid; gap: clamp(2.2rem, 5vw, 4.5rem); }
@media (min-width: 900px){
  .profile{ grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
}
.concept{
  margin: 0;
  font-size: clamp(0.98rem, 1.7vw, 1.16rem);
  font-weight: 300;
  line-height: 2.25;
  color: var(--white);
}
.facts{ display: grid; grid-template-columns: 7.5em minmax(0,1fr); margin: 0; font-size: 0.88rem; }
.facts dt{
  font-family: var(--latin);
  font-weight: 400;
  font-size: 0.64rem;
  letter-spacing: 0.2em;
  color: var(--faint);
  border-top: 1px solid var(--line);
  padding: 1rem 0;
}
.facts dd{
  margin: 0;
  color: var(--white);
  font-weight: 300;
  border-top: 1px solid var(--line);
  padding: 1rem 0;
  line-height: 1.85;
}

/* ── CONTACT ─────────────────────── */

.contact{ display: grid; gap: clamp(2.2rem, 5vw, 4.5rem); align-items: start; }
@media (min-width: 900px){
  .contact{ grid-template-columns: minmax(0,1.05fr) minmax(0,1fr); }
}
/* フォームをやめてメール・Instagramへの導線だけにした版（2026-07-31） */
.contact--links .more-row .more{ margin-top: 0; }
.contact--links .reach{ max-width: 34em; }
form{ display: grid; gap: 1.1rem; }
label{
  display: grid;
  gap: 0.5rem;
  font-family: var(--latin);
  font-weight: 400;
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  color: var(--faint);
}
input, textarea, select{
  font-family: var(--jp);
  font-weight: 300;
  font-size: 0.92rem;
  color: var(--white);
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 0.8rem 0.9rem;
  width: 100%;
  transition: border-color 0.3s, background 0.3s;
}
input:focus, textarea:focus, select:focus{
  outline: none;
  border-color: var(--rose-lit);
  background: rgba(255,255,255,0.05);
}
textarea{ min-height: 8.5rem; resize: vertical; line-height: 1.8; }
button.send{
  justify-self: start;
  font-family: var(--latin);
  font-weight: 300;
  font-size: 0.74rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--white);
  padding: 0.95rem 2.4rem;
  cursor: pointer;
  transition: background 0.3s, color 0.3s;
}
button.send:hover{ background: var(--rose-lit); border-color: var(--rose-lit); }
.sent{
  margin: 0;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--rose-lit);
  min-height: 1.4em;
}
.reach{ list-style: none; margin: 0; padding: 0; }
.reach li{
  border-top: 1px solid var(--line);
  padding: 1rem 0;
  display: flex;
  justify-content: space-between;
  gap: 1.2rem;
  font-size: 0.9rem;
}
.reach li span:first-child{
  font-family: var(--latin);
  font-weight: 400;
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  color: var(--faint);
}
.reach li span:last-child{ color: var(--white); font-weight: 300; text-align: right; }

/* ── フッター ─────────────────────── */

footer{
  border-top: 1px solid var(--line);
  padding: 2.2rem var(--gutter) 4.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 2rem;
  justify-content: space-between;
  font-family: var(--latin);
  font-weight: 300;
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  color: var(--faint);
}

footer a:hover{ color: var(--rose-lit); }

.reveal{
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.2,0.8,0.3,1);
}
.reveal[data-shown="true"]{ opacity: 1; transform: none; }

/* ── 下層ページ（ヒーローなし） ─────── */

body.sub .brand{ opacity: 1; transform: none; }
/* 下層ページは中身がバーの裏を通るので不透明にする */
body.sub .bar,
body.sub .bar[data-stuck="true"]{
  background: var(--ink);
  border-bottom: 1px solid var(--line);
}
body.sub main > .sec:first-child{ padding-top: clamp(5.5rem, 9vw, 7.5rem); }

/* ── 一覧への導線 ─────────────────── */

.more{
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  margin-top: clamp(2rem, 4vw, 3rem);
  border: 1px solid var(--line);
  padding: 0.95rem 1.7rem;
  font-family: var(--latin);
  font-weight: 300;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--white);
  transition: border-color 0.3s, background 0.3s, transform 0.3s;
}
.more:hover{
  border-color: var(--rose-lit);
  background: rgba(201,156,163,0.08);
  transform: translateX(4px);
}
.more em{ font-style: normal; color: var(--faint); font-variant-numeric: tabular-nums; }

.more-row{
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}
.more-row .more{ margin-top: clamp(1.4rem, 3vw, 2.2rem); }

@media (max-width: 720px){
  .tiles--vert{ grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
  .tiles--wide{ grid-template-columns: minmax(0, 1fr); }
  .plain li time{ margin-left: 0; }
  body{ font-size: 0.92rem; }
  .sec--rose .note{ font-weight: 400; }
  .facts{ grid-template-columns: minmax(0,1fr); }
  .facts dt{ padding: 0.9rem 0 0; }
  .facts dd{ border-top: 0; padding: 0.2rem 0 1rem; }
  .reach li{ flex-direction: column; gap: 0.25rem; }
  .reach li span:last-child{ text-align: left; }
  footer{ flex-direction: column; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  .hero h1, .hero p{ opacity: 1; }
  .reveal, .card, .tile{ opacity: 1; transform: none; }
}