/* Papillon Logic — 公式サイト共通スタイル
   配色は独自に発明していない。社内の管理ツールと共通のカラートークンをそのまま引いている
   （表に出るサイトと社内ツールでブランドカラーが割れないようにするため）。 */

:root{
  --bg:#070d0c; --panel:#0d1817; --panel2:#122220; --line:#1c332f;
  --fg:#d8ece7; --dim:#6f918a; --acc:#2ee6a8; --acc2:#35d6d6;
  --warn:#ffc043;
}

*{box-sizing:border-box}
html{background:#070d0c}
body{
  margin:0;padding:0;color:var(--fg);
  /* 地の色を上から下へ、ごくわずかに寒色から暖色へ傾ける。ページの後半で
     世界観のアートワーク（朱・金）が増えていくのに合わせた温度変化で、
     気づかれない程度の変化に留めている。 */
  background:linear-gradient(180deg,
    #070d0c 0%, #070d0c 30%, #0b0e0a 48%, #100e09 64%, #140f09 82%, #100d0a 100%);
}
body{
  font-family:"Yu Gothic UI","Meiryo","Hiragino Kaku Gothic ProN","Segoe UI",system-ui,sans-serif;
  font-size:16px;line-height:1.75;
}
img{max-width:100%;display:block}
a{color:var(--acc2);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{color:#f2fffb;font-weight:700;margin:0}

/* 擬似ターミナル体（等幅） */
.mono{
  font-family:"Consolas","Cascadia Mono","SFMono-Regular",Menlo,monospace;
}

/* 極太コンデンス・グロテスク体の代替スタック。
   外部フォントを読み込まないため、手持ちの範囲でコンデンス感を作る。
   Impact を先頭に置く。和文UI体が先に当たると、意図と逆のプロポーション（横広）で
   描画されてしまうため。Arial Narrow は太字(900)を持たないため、太さは700に留める
   （Impact自体が太い書体なので700でも十分読める）。
   横方向の詰め（scaleX）は現状維持。詰め量は見た目で微調整が要る値のため据え置く。 */
.wordmark{
  font-family:Impact,"Arial Narrow","Yu Gothic UI","Segoe UI",sans-serif;
  font-weight:700;
  letter-spacing:.02em;
  transform:scaleX(0.94);
  transform-origin:left center;
  display:inline-block;
}

.container{
  max-width:1080px;margin:0;
  /* 完全な中央寄せをやめ、左に寄せた文章の柱にする。右側は余白のまま残す。
     ページ幅そのもの（max-width）は変えない。読み幅とレイアウト幅は別物として扱う。 */
  padding:0 24px 0 clamp(20px, 8vw, 140px);
}

/* ---------- ヘッダー ---------- */
header.site{
  position:sticky;top:0;z-index:30;
  background:linear-gradient(180deg,#0b1614,#091211);
  border-bottom:1px solid var(--line);
}
header.site .bar{
  display:flex;align-items:center;gap:18px;padding:14px 20px;
  max-width:1080px;margin:0 auto;flex-wrap:wrap;
}
header.site .logo{
  font-size:18px;color:var(--fg);letter-spacing:.08em;
}
header.site .logo b{color:var(--acc)}
header.site nav{display:flex;gap:18px;margin-left:auto;flex-wrap:wrap}
header.site nav a{color:var(--dim);font-size:14px;letter-spacing:.04em}
header.site nav a:hover{color:var(--acc2)}
header.site .lang{
  border:1px solid var(--line);border-radius:999px;padding:3px 12px;
  font-size:12px;color:var(--dim);
}
header.site .lang a{color:var(--dim)}
header.site .lang a.on{color:var(--acc2)}
header.site .lang .sep{margin:0 4px;color:var(--line)}

/* ---------- ヒーロー ---------- */
/* 2カラム構図。左は実際のDOMテキスト（社名の大見出し＋擬似ターミナル）、
   右は画像。柱の幅比率（38%/62%）と社名の大きさはまだ評価待ちのため、
   このバージョンでは変更していない。
   画像素材は PNG（可逆圧縮）に差し替えた。JPEG は黒を完全な #000 に保持できず、
   発光部分の周囲にブロックノイズ（モヤ）が出て、地の色との境目が矩形として
   見えてしまっていた。PNG はそれが起きない。
   さらに mix-blend-mode:screen を掛けている。screen は純黒(#000)を完全な
   透明として扱うため、画像の矩形の縁そのものが原理上消える。
   これは画像の直接の親要素（.hero）の背景が #000（var(--bg)ではなく純黒）
   であることが前提。.hero-art 自体には背景を設けておらず、.hero の #000 が
   そのまま透けるため、screen の相手は確実に純黒になる（実装時に確認済み）。
   蝶をできるだけ左（＝擬似ターミナルの並びに近づく側）へ寄せるため、
   object-position を中央から左寄りへ動かした。ただし画像の箱は縦横比が
   合っていないため object-fit:cover では必ずどこかを切ることになり、
   左へ寄せすぎると蝶の右側（発光する翼）が箱の外に出て消えてしまう。
   実際の画素を基準に「翼の全体が収まる左右位置の範囲」を計算し、その範囲の
   中でできるだけ左寄りの値（57%）を選んだ。安全側に振っているため、
   理論上ぎりぎりまでは寄せていない。 */
.hero{
  position:relative;display:flex;overflow:hidden;background:#000;
  min-height:56vh;max-height:640px;
}
.hero-copy{
  flex:0 1 auto;min-width:280px;max-width:540px;
  display:flex;flex-direction:column;justify-content:center;
  padding:0 clamp(20px, 6vw, 64px);position:relative;z-index:2;
}
.hero-word{
  font-size:clamp(34px, 5.5vw, 64px);color:var(--fg);margin:0;
  white-space:nowrap;width:max-content;max-width:none;
}
.hero-art{
  position:relative;flex:0 0 38%;min-width:180px;overflow:hidden;margin-right:auto;margin-left:clamp(-230px, -9vw, 0px);
  align-self:center;height:min(56vh, 400px);
}
.hero-art img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:57% 50%;
  mix-blend-mode:screen;
  /* 明度・彩度とも社名（--fg:#d8ece7）を基準に、その少し下へ置いている。
     - 明度: 社名 89% に対し 82%（＝92%）
     - 彩度: 社名は HSL彩度 34.5%。原画の色画素（彩度20%超）は平均 84.4% あり、
       saturate(.42) を掛けると 31.8%（＝社名の92%）になる。明度と同じ比率。
     saturate は白（彩度0）に効かないため、白い回路線はこの指定では動かない
     ——回路線を沈めるのは brightness 側の仕事である。 */
  filter:brightness(.82) saturate(.42);
}
@media(max-width:760px){
  .hero{flex-direction:column;max-height:none;min-height:0}
  .hero-copy{flex:0 0 auto;max-width:none;width:100%;padding:26px 24px 16px}
  .hero-art{flex:0 0 auto;height:min(34vh, 320px);min-height:200px;align-self:auto}
  .hero-art img{object-position:50% 50%}
}

/* 擬似ターミナルの帯。ゲームの実パラメータをシステム状態として表示する。
   上のブロック（kagiroi_zankou {…}、ラベル行）は地味色で置き、
   [CRITICAL STATE INJECTION:] の下の3行だけを発光させる（.glow）。
   発光の色は文字色・影とも同じ色相（--acc）に揃えてある。
   white-space:pre で桁を厳密に保つ。文字側の柱を62%程度まで広げたことで、
   一番長い行でも収まる計算になったため、フォントサイズは12pxへ戻した
   （実測して確認したわけではなく、文字幅の概算による判断）。 */
.term-strip{margin-top:16px}
.term-strip .line{
  font-size:12px;color:var(--dim);opacity:.9;line-height:1.75;
  white-space:pre;
}
.term-strip .line.glow{
  color:var(--acc);
  text-shadow:0 0 6px rgba(46,230,168,.55);
}

/* ---------- 帯見出し ---------- */
/* 罫を左から伸ばし、見出しをその右端に置く。装飾のアクセントカラーは
   使わず地の色に寄せている（発光色は画面のごく一部だけに使う要素のため、
   見出しのたびに使うと画面全体へ均等に散らばってしまう）。 */
.strip{display:flex;align-items:center;gap:12px;margin:64px 0 22px}
.strip h2{font-size:13px;letter-spacing:.22em;color:var(--fg);font-weight:700}
.strip .rule{flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--line))}

section{padding:0 0 10px}
section:first-of-type{padding-top:10px}

/* ---------- タグライン ---------- */
.tagline-block{padding:36px 0 8px}
.tagline{font-size:26px;color:#f2fffb;line-height:1.6;font-weight:600;margin:0}
.tagline .en{display:block;font-size:14px;color:var(--dim);font-weight:400;
  font-style:italic;margin-top:6px}
.tagline-sub{margin:22px 0 0;font-size:14px;color:var(--dim)}
.tagline-sub .en{display:block;font-size:12.5px;color:var(--dim);opacity:.85;
  font-style:italic;margin-top:3px}

/* ---------- 地の文まわり ---------- */
/* 箱（塗り・角丸・外枠）は使わない。区切りは罫（1本線）と余白だけで作る。 */
.panel{
  border-top:1px solid var(--line);
  padding:22px 0 0;
}
.panel > p{max-width:36em}

/* ---------- ゲーム紹介 ---------- */
.game-intro .en{color:var(--dim);font-size:13px;margin:4px 0 0}
.game-intro > p{max-width:36em;color:#c3d9d4;font-size:15px}
.game-intro .meta{
  display:flex;flex-wrap:wrap;margin:16px 0 4px;
}
.chip{
  font-size:12.5px;color:var(--fg);
  padding:2px 16px;border-left:1px solid var(--line);
}
.chip:first-child{border-left:none;padding-left:0}
/* トップページに置く代表カット1枚。作品ページ（コンセプトアートを複数並べる場所）への
   入口を兼ねるので、画像自体をリンクにしている。箱は作らず、画像と細い上罫だけ。 */
.teaser-art{
  display:block;margin-top:24px;max-width:640px;
  border-top:1px solid var(--line);padding-top:16px;
}
.teaser-art img{width:100%;height:auto}
/* ジャンルを表すチップは色ではなく太字で目立たせる（発光色の使用箇所を絞るため）。 */
.chip.acc{color:#f2fffb;font-weight:600}

.note-concept{
  font-size:12px;color:var(--dim);margin:8px 0 0;max-width:36em;
}

.btn{
  display:inline-block;border:1px solid var(--acc);color:var(--acc);
  border-radius:999px;padding:9px 22px;font-size:14px;letter-spacing:.05em;
  margin-top:16px;
}
.btn:hover{background:var(--acc);color:#052019;text-decoration:none}

/* ---------- 帯ギャラリー ---------- */
/* 等間隔のグリッドではなく、1枚＝1帯として画像を主役にする。
   画像は片側いっぱいに敷き、文章はもう片側の狭い柱に収める。
   既定は「画像＝右／文章＝左」（DOM順で文章を先に書くと、既定のflexで自然に左へ来る）。
   最初の帯だけは画像を全幅で見せ、文章をその下に置く（他の帯と格を変えるため）。 */
.bands{border-top:1px solid var(--line)}
.band{
  display:flex;min-height:56vh;
  border-bottom:1px solid var(--line);
}
.band-img{position:relative;flex:1 1 60%;overflow:hidden;display:block}
.band-img img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .5s ease;
}
.band-img:hover img{transform:scale(1.03)}
.band-copy{
  flex:1 1 40%;display:flex;flex-direction:column;justify-content:center;
  padding:40px clamp(20px, 6vw, 64px);
}
.band-copy p{max-width:34em;color:#c3d9d4;font-size:15px;margin:0}
.band-eyebrow{
  font-size:11px;letter-spacing:.18em;color:var(--dim);margin:0 0 10px;
}
/* 左右の入れ替えは flex-direction ではなく、HTML側のDOM順（画像を先に書くか、
   文章を先に書くか）だけで決めている。既定は「文章→画像」の順で書き、
   1つだけ「画像→文章」の順に入れ替えて、画像を左側に出している。 */

.band-full{flex-direction:column;min-height:0}
.band-full > a{display:block}
.band-full img{width:100%;height:auto;display:block;object-fit:cover;max-height:70vh}
.band-full .band-copy{padding:24px clamp(20px, 6vw, 64px) 36px}

@media(max-width:760px){
  .band{flex-direction:column;min-height:0}
  .band-img{height:46vh}
  .band-copy{padding:26px 24px}
}

/* ---------- AI開示 ---------- */
/* .disclose は .panel と同じ要素に併用されるクラス。左のアクセント罫だけを
   ここで足し、内側の余白は .panel 側の値をそのまま使う（重ねて上書きしない）。 */
.disclose{
  border-left:3px solid var(--line);padding-left:16px;margin:14px 0;
}
.disclose p{margin:6px 0;font-size:14.5px;color:#c3d9d4;max-width:36em}
.disclose .quote{
  font-family:"Consolas","Cascadia Mono",monospace;font-size:13px;
  color:var(--fg);border-left:1px solid var(--line);
  padding:10px 14px;margin:8px 0;white-space:pre-wrap;
  max-width:36em;
}

/* ---------- 会社紹介 ---------- */
.about-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:20px}
@media(max-width:760px){.about-grid{grid-template-columns:1fr}}
.about-grid p{color:#c3d9d4;font-size:15px}
dl.fact{margin:0}
dl.fact dt{font-size:11.5px;letter-spacing:.14em;color:var(--dim);margin-top:14px}
dl.fact dt:first-child{margin-top:0}
dl.fact dd{margin:2px 0 0;font-size:14.5px;color:var(--fg)}

/* ---------- フッター ---------- */
footer{
  border-top:1px solid var(--line);margin-top:70px;padding:26px 0 60px;
  color:var(--dim);font-size:12.5px;
}
footer .container{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}
footer a{color:var(--dim)}
footer a:hover{color:var(--acc2)}

/* ---------- 英語版スタブ ---------- */
.stub{
  min-height:50vh;display:flex;flex-direction:column;align-items:flex-start;
  justify-content:center;gap:18px;padding-top:40px;
}
.stub .big{font-size:34px}
.stub .lead{color:#c3d9d4;font-size:16px;max-width:640px}


/* =========================================================================
   Papillon Logic 新デザイン（2026-08-07 追加）
   出典: site/design_handoff_papillon_logic/{index,game}.dc.html ＋ README.md

   ⛔ ここから下のセレクタはすべて `.pl` 配下に閉じてある。
      `.pl` は index.html / game.html の <html> にだけ付く。
      index.en.html は旧デザインのままで `.pl` を持たないため、
      上の既存定義は1行も変わらない（＝旧ページの見た目は不変）。

   ⚠ 上の旧定義のうち、要素セレクタ（body / section / footer / h1,h2,h3 /
      a / img）は新ページにも当たってしまう。新デザインは Nocturne DS の
      リセットを前提にしているので、当たる分だけをここで打ち消している。
      「新しく足した値」ではなく「素の値へ戻した」ものである。
   ========================================================================= */

/* ---- トークン（README「Design Tokens」の表がそのまま正典） ---- */
.pl{
  --color-bg:#101a1c; --color-surface:#18262a; --color-text:#e6efee;
  --color-accent:#3fd9c4; --color-accent-2:#3fd9c4;
  --color-accent-100:#eafffb; --color-accent-200:#c5f7ef; --color-accent-300:#92ece0;
  --color-accent-400:#5fdfcd; --color-accent-500:#35c3b0; --color-accent-600:#229f8f;
  --color-accent-700:#1a7b6e; --color-accent-800:#17564e; --color-accent-900:#123832;
  --color-neutral-100:#f2f6f5; --color-neutral-200:#dbe4e3; --color-neutral-300:#bcc9c8;
  --color-neutral-400:#93a3a3; --color-neutral-500:#6d7d7e; --color-neutral-600:#4e5c5e;
  --color-neutral-700:#374446; --color-neutral-800:#263134; --color-neutral-900:#1a2427;
  --color-divider:color-mix(in srgb,#e6efee 15%,transparent);
  --color-section:#0e3c3a; --color-section-glow:#14504c; --color-section-ghost:#1e6b65;
  --radius-md:8px;
  background:var(--color-bg);
}

/* ---- 旧定義の打ち消し（素へ戻す） ---- */
.pl body{
  margin:0;padding:0;background:var(--color-bg);color:var(--color-text);
  font-family:"Inter","Noto Sans JP",system-ui,sans-serif;font-weight:300;
  /* 旧 body の 16px/1.75 を引き継ぐと、line-height を持たない要素
     （FOLLOW の行・タグ・ボタン）の行箱が数px高くなる。normal へ戻す。 */
  font-size:16px;line-height:normal;-webkit-font-smoothing:antialiased;
}
.pl h1,.pl h2,.pl h3{color:inherit;font-weight:inherit;margin:0}
.pl section{padding:0}
.pl section:first-of-type{padding-top:0}
.pl footer{margin:0;padding:0;color:inherit;font-size:inherit;border-top:0}
.pl a{color:var(--color-accent-300);text-decoration:none}
.pl a:hover{color:var(--color-accent-200);text-decoration:none}
.pl ::selection{background:var(--color-accent-800)}
/* README「Interactions & Behavior / フォーカス」より。ブラウザ既定の青リングは使わない */
.pl :focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}

/* ---- ヒーローの蝶（`pl-drift`） ----
   .dc.html ではインライン animation だったが、prefers-reduced-motion で
   止められるようにクラスへ移した（README「実装時に追加推奨」）。値は同一。 */
@keyframes pl-drift{
  0%{transform:translateY(0) rotate(0deg)}
  50%{transform:translateY(-14px) rotate(.6deg)}
  100%{transform:translateY(0) rotate(0deg)}
}
.pl .pl-butterfly{animation:pl-drift 14s ease-in-out infinite}
@media (prefers-reduced-motion: reduce){
  .pl .pl-butterfly{animation:none}
  .pl *{transition-duration:.01ms!important}
}

/* ---- リンク（.dc.html の `style-hover` 属性を :hover へ移したもの） ----
   休止時の色もインラインから外してここへ置いた。インライン style は
   CSS の :hover より強く、インラインのままでは hover が効かないため。
   値は .dc.html と同一。 */
.pl a.pl-navlink{color:var(--color-neutral-300)}
.pl a.pl-navlink:hover{color:var(--color-text)}
.pl a.pl-navlink.is-current,
.pl a.pl-navlink.is-current:hover{color:var(--color-text)}
.pl a.pl-quietlink{color:var(--color-neutral-400)}
.pl a.pl-quietlink:hover{color:var(--color-text)}

/* ---- FOLLOW の行（index.dc.html:218-232） ---- */
.pl a.pl-follow{
  display:flex;align-items:center;gap:14px;padding:15px 18px;
  border:1px solid var(--color-neutral-800);border-radius:var(--radius-md,8px);
  background:var(--color-surface);color:var(--color-text);
  transition:border-color .18s,background .18s;
}
.pl a.pl-follow:hover{
  border-color:var(--color-accent-700);background:var(--color-accent-900);
  color:var(--color-text);
}

/* ---- .btn / .btn-primary / .btn-ghost ----
   .dc.html は Nocturne DS の定義に依存していて同梱されていない。
   上の旧 `.btn`（丸ピル・1px 罫・9px 22px・14px・.05em）の形をそのまま引き、
   色だけ README の色表へ差し替えた。旧 `.btn` の `margin-top:16px` は、
   新デザインではボタンが gap 付き flex の中に入るため 0 に戻している。 */
.pl .btn{
  display:inline-block;margin:0;
  border:1px solid var(--color-accent);color:var(--color-accent);
  border-radius:999px;padding:9px 22px;
  font-size:14px;line-height:1.5;letter-spacing:.05em;
  transition:background .18s,color .18s,border-color .18s;
}
.pl .btn-primary{background:var(--color-accent);color:var(--color-bg);border-color:var(--color-accent)}
.pl .btn-primary:hover{background:var(--color-accent-400);border-color:var(--color-accent-400);color:var(--color-bg)}
.pl .btn-ghost{background:transparent;color:var(--color-neutral-200);border-color:var(--color-neutral-700)}
.pl .btn-ghost:hover{background:var(--color-accent-900);border-color:var(--color-accent-700);color:var(--color-text)}

/* ---- .tag / .tag-accent / .tag-outline ----
   旧 `.chip` は罫で区切る形（gap を持たない並び）で、新デザインの
   `display:flex;gap:8px` の中では区切り罫が宙に浮く。丸ピルへ置き換えた。
   小さい文字なので、アクセントそのもの（#3fd9c4）ではなく accent-300 を使う
   （README「本文サイズのテキストにアクセントそのものを使わない」）。 */
.pl .tag{
  display:inline-block;
  font-size:12px;line-height:1.6;letter-spacing:.04em;
  padding:5px 12px;border-radius:999px;
  border:1px solid var(--color-neutral-700);background:transparent;
  color:var(--color-neutral-300);
}
.pl .tag-accent{color:var(--color-accent-300);border-color:var(--color-accent-700);background:var(--color-accent-900)}
.pl .tag-outline{color:var(--color-neutral-300);border-color:var(--color-neutral-700);background:transparent}

/* ---- .card 一式（JOURNAL） ----
   ABOUT の <dl>（index.dc.html:130）が持つ意匠に揃えた:
   surface / 1px neutral-800 / radius 8px / padding 26px 28px。
   内部のテキストは同じ <dl> の dt・dd の値を流用している。 */
.pl .card{
  background:var(--color-surface);
  border:1px solid var(--color-neutral-800);
  border-radius:var(--radius-md,8px);
  padding:26px 28px;
}
.pl .card-kicker{margin:0 0 14px;font-size:10.5px;letter-spacing:.2em;color:var(--color-neutral-500)}
.pl .card-title{margin:0 0 12px;font-size:17px;line-height:1.7;letter-spacing:.03em;color:var(--color-text)}
.pl .card-body{margin:0 0 18px;font-size:13px;line-height:1.95;color:var(--color-neutral-300)}
.pl .card-meta{margin:0;font-size:11.5px;letter-spacing:.06em;color:var(--color-neutral-500)}

/* ---- .table（作品ページのスペック表） ----
   .card と同じトークンで組む。border-radius を効かせるため collapse ではなく
   separate + border-spacing:0 を使い、区切りは各セルの下罫で作る。 */
.pl .table{
  border-collapse:separate;border-spacing:0;
  background:var(--color-surface);
  border:1px solid var(--color-neutral-800);
  border-radius:var(--radius-md,8px);
  overflow:hidden;
}
.pl .table th,.pl .table td{
  padding:14px 20px;border-bottom:1px solid var(--color-divider);
  vertical-align:top;font-weight:400;
}
.pl .table tr:last-child th,.pl .table tr:last-child td{border-bottom:0}
.pl .table th{font-size:10.5px;letter-spacing:.2em;color:var(--color-neutral-500);padding-top:18px}
.pl .table td{font-size:14px;line-height:1.85;color:var(--color-neutral-200)}

/* ---- レスポンシブ（README「未設計。〜900px で1カラム化を追加すること」） ----
   ⛔ 900px 以上には1つも当たらない。@media の中でだけ !important を使い、
      .dc.html のインライン値を落としている（900px 超では素通り）。 */
/* 899.98px にしてあるのは、900px ちょうどでは1カラム化させないため。
   README は「〜900px で1カラム化」と書いているが、発注側の条件は
   「900px 以上での見え方を1pxも変えない」だった。899.98px なら両方満たす。 */
@media (max-width:899.98px){
  .pl .pl-grid{grid-template-columns:minmax(0,1fr)!important;gap:40px!important}
  .pl .pl-art-grid{grid-template-columns:repeat(2,1fr)!important}
  .pl .pl-art-grid > *{grid-column:auto!important}
  .pl .pl-art-grid > *:first-child{grid-column:span 2!important}
  .pl .pl-wrap{padding-left:20px!important;padding-right:20px!important}
  .pl .pl-hero{padding-top:64px!important;padding-bottom:72px!important}
  .pl .pl-butterfly{opacity:.14!important}
}
@media (max-width:640px){
  .pl .pl-header-bar{height:auto!important;flex-wrap:wrap;gap:12px!important;padding-top:12px!important;padding-bottom:12px!important}
  .pl .pl-nav{flex-wrap:wrap;gap:16px!important;margin-left:0!important;font-size:12px!important;order:3;width:100%}
  .pl .pl-lang{margin-left:auto;padding-left:14px!important}
  .pl .pl-art-grid{grid-template-columns:1fr!important}
  .pl .pl-art-grid > *:first-child{grid-column:auto!important}
  .pl .pl-butterfly{display:none}
}