/* =========================================================
   .standard ｜ 言葉になる前を、設計する。
   一本の線が、対話を拾いながら伸びて、最後に平面図になる。
   参照した規律：Edition Office（図面を写真と同格に）／
   6a architects（明朝と文章体のキャプション）／
   Elding Oscarson（余白をリズムにする）／Radian（線が主役）
   ========================================================= */

/* トークン・ヘッダー・フッターは base.css。ここはトップページ専用 */

/* =========================================================
   はじまりの幕
   ロゴが下から浮き上がる → 「.」から線が横に生まれる → 幕が上へ退く。
   このサイトの主題（一本の線）を、入口で先に一度だけ見せている。

   ・fixed なので本編のレイアウトには触れない（線の実測が狂わない）
   ・動きは JS が data-act で段階を進め、CSS が受ける
   ・.is-done が付くと transition で退場し、終わったら display:none
   ========================================================= */
.curtain{
  position:fixed; inset:0; z-index:120;
  display:grid; place-items:center;
  background:var(--bg);
  /* 幕自体が上へ抜ける。中身は別で動かすので、退場は素直な平行移動 */
  transition:transform 1.05s var(--ease), opacity .75s ease .25s;
  will-change:transform, opacity;
}
/* スクロールは JS が «出来事» ごと止める。
   overflow を触るとスクロールバーが消えて紙幅が 15px 動き、
   線の実測がやり直しになるので、ここでは何もしない */

.curtain__stage{
  position:relative;
  /* 元画像が 1032px 幅の JPG なので、小さく置くほど圧縮の粗が潰れて見えなくなる */
  width:min(46vw, 208px);
  display:grid; justify-items:center;
}

/* ---- ロゴ。assets/logo.png は透過PNG（白地は本物の透明） ---- */
.curtain__logo{
  display:block; width:100%; aspect-ratio:708 / 441;
  opacity:0; transform:translateY(26px); filter:blur(10px);
  transition:opacity 1.5s var(--ease), transform 1.6s var(--ease), filter 1.5s var(--ease);
}
.curtain__logo img{ display:block; border:0; width:100%; height:100%; }

/* ---- 浮いている感じ。出きったあとも、ごくゆっくり漂わせる ---- */
@keyframes curtainFloat{
  0%,100%{ transform:translateY(0); }
  50%    { transform:translateY(-5px); }
}
.curtain[data-act="1"] .curtain__logo,
.curtain[data-act="2"] .curtain__logo{
  /* 浮上（1.6秒）が終わってから漂いはじめる。途中で始めると位置が飛ぶ */
  animation:curtainFloat 5.5s ease-in-out 1.7s infinite;
}

/* ---- 「.」から生まれる線。中央から左右へ開く ---- */
.curtain__seed{
  display:block; width:100%; height:1px; margin-top:clamp(14px, 3vw, 26px);
  overflow:visible;
}
.curtain__seedline{
  stroke:var(--ink); stroke-width:1; stroke-linecap:round;
  vector-effect:non-scaling-stroke;
  transition:none;
}

/* ---- 線の先端に灯る朱の点。base.css の作法どおり «先端と「.」だけ» ----
   左端（ロゴの「.」の真下）から出発し、JS が left を動かして線の先を走る */
.curtain__dot{
  position:absolute; left:0; bottom:0;
  width:5px; height:5px; margin-left:-2.5px; border-radius:50%;
  background:var(--accent);
  opacity:0; transform:scale(.4);
  transition:opacity .45s ease, transform .6s var(--ease);
}

.curtain__read{
  position:absolute; left:50%; transform:translateX(-50%);
  bottom:clamp(28px, 7vh, 64px);
  font-family:var(--num); font-size:11px; letter-spacing:.34em;
  color:var(--pale); text-indent:.34em;
  opacity:0; transition:opacity .9s ease;
}

/* ---- 進行 ---- */
.curtain[data-act="1"] .curtain__logo{ opacity:1; transform:none; filter:blur(0); }
.curtain[data-act="2"] .curtain__logo{ opacity:1; transform:none; filter:blur(0); }
.curtain[data-act="2"] .curtain__dot{ opacity:1; transform:scale(1); }
.curtain[data-act="2"] .curtain__read{ opacity:1; }

/* ---- 退場 ----
   幕を «動かさない»。地の色は本編と同じ白なので、透かしていくだけで
   境目のない入れ替わりになる。スライドさせると «別の面がめくれた» と読めて、
   そこで一度切れてしまう。

   順番が肝心：
     ① まずロゴと線がふわりと解ける（0〜0.9秒）
     ② 遅れて幕そのものが透ける（0.35秒〜1.5秒）
   ①が先に済むぶん、白の中からロゴだけが消えていき、
   気づくと本編が出ている、という見え方になる。 */
.curtain.is-done{
  opacity:0; pointer-events:none;
  transform:none;                                   /* スライドはしない */
  transition:opacity 1.15s var(--ease) .35s;
}
.curtain.is-done .curtain__stage{
  opacity:0; transform:translateY(-10px); filter:blur(6px);
  transition:opacity .8s ease, transform 1.1s var(--ease), filter .8s ease;
}
.curtain.is-done .curtain__logo{ animation:none; }  /* 漂いを止めてから溶かす */
.curtain.is-done .curtain__read{ opacity:0; transition:opacity .45s ease; }
.curtain[hidden]{ display:none; }

/* 本編側は何も足さない。
   このサイトには元から «あらわれ方»（.node__in > * を伏せて .is-in で起こす）がある。
   その起動を幕が溶けはじめる時刻に合わせてあるので、
   «幕が消える» と «本文が現れる» が同じ時間に重なり、境目が無くなる。
   ここで別のフェードを足すと二重になって、かえって段が付く。 */

/* 動きを減らす設定のときは、静かに出して静かに消すだけ */
@media (prefers-reduced-motion: reduce){
  .curtain{ transition:opacity .4s ease; }
  .curtain.is-done{ transform:none; opacity:0; transition:opacity .4s ease; }
  .curtain.is-done .curtain__stage{ filter:none; }
  .curtain__logo{ transition:opacity .4s ease; transform:none; filter:none; }
  .curtain[data-act="1"] .curtain__logo,
  .curtain[data-act="2"] .curtain__logo{ animation:none; }
  .curtain__stage, .curtain.is-done .curtain__stage{ transition:none; transform:none; }
  .curtain__dot, .curtain__read{ transition:opacity .4s ease; }
}

/* =========================================================
   一本の線
   ========================================================= */
.thread{ position:relative; }
.thread__svg{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:0; overflow:visible; }
.thread__line{
  stroke:var(--ink); stroke-width:1; stroke-linecap:round; stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
  /* 真っ黒（--ink）のままだと線が勝ってしまい、脇の文章が読みにくくなる。
     線は «通り道» であって主役ではないので、地の色に少し沈める。 */
  opacity:.55;
}
/* もやもや＝同じ線が何本もブレて重なっている状態。進むほど一本に収束する */
.thread__strands path{
  fill:none; stroke:var(--ink); stroke-width:1; vector-effect:non-scaling-stroke;
  stroke-linecap:round; stroke-linejoin:round;
}
/* 線の先端 */
.thread__tip{
  position:absolute; width:5px; height:5px; border-radius:50%;
  background:var(--accent); translate:-50% -50%; opacity:0; z-index:1;
  box-shadow:0 0 0 5px rgba(194,69,45,.10);
}

/* ---- ブロック ----
   文章は中央の段組みではなく、線の脇に張りつける。
   位置は main.js が線の通り道から計算して入れる */
.node{
  position:relative; z-index:2;
  min-height:84vh; padding:0 var(--pad);
  max-width:none; margin:0;
}
.node__in{ position:absolute; top:50%; translate:0 -50%; width:min(42ch,40vw); }
.node__in > * + *{ margin-top:22px; }

/* ヒーローは、画面のまんなかで開く */
.node--hero{ min-height:100vh; display:grid; align-content:center; }
.node--hero .node__in{
  position:relative; top:auto; translate:none;
  left:auto !important; right:auto !important;
  width:min(88vw,720px); margin:0 auto; text-align:center;
}
.node--hero .hero__hint{ margin-top:56px; }
.node--hero h1{ font-size:clamp(28px,5vw,54px); line-height:1.75; letter-spacing:.11em; }
.hero__sub{ font-size:15px; line-height:2.5; color:var(--grey); }
.hero__hint{ font-family:var(--num); font-size:11.5px; letter-spacing:.44em; color:var(--pale); margin-top:56px !important; }

/* 散らした言葉より、本文が確実に手前に立つように。
   大きさ・濃さ・紙色のハローの3つで守る */
.q, .turn, .why, .lead{
  text-shadow:0 0 8px var(--bg), 0 0 8px var(--bg), 0 0 4px var(--bg), 0 0 4px var(--bg);
}
/* 要望（＝手段）は小さく灰色で。目的はその下に、大きく黒で置く */
.q{ font-family:var(--mincho); font-size:clamp(15px,1.8vw,19px); line-height:2;
    letter-spacing:.14em; color:var(--grey); }
.q em{
  display:block; margin-top:16px; color:var(--ink);
  font-size:clamp(22px,2.8vw,32px); line-height:2.05; letter-spacing:.08em;
}
.turn b{ font-weight:400; color:var(--accent); }

/* 日本語の見出しは、文節ごとに inline-block で包んで折り返す。
   こうしないと「これがい／い」のように語の途中で折れる */
.credo span, .turn span, .sec__h span, .end__h span,
.fin__cap span, .fin__title span{
  display:inline-block;
}
.credo, .turn, .sec__h, .end__h, .fin__cap, .fin__title{ text-wrap:balance; }

.node--turn .node__in, .node--conv .node__in{
  left:auto !important; right:auto !important; width:min(92vw,820px);
  margin-inline:auto; position:relative; top:auto; translate:none; text-align:center;
}
.node--turn, .node--conv{ display:grid; align-content:center; min-height:88vh; }
.turn{ font-family:var(--mincho); font-size:clamp(18px,2.5vw,28px); line-height:2.3;
       letter-spacing:.09em; color:var(--ink); }

/* 線とは無関係に散らす、薄い言葉たち */
.wf{
  font-family:var(--gothic); letter-spacing:.1em; fill:var(--ink);
  paint-order:stroke fill; stroke:var(--bg); stroke-width:4px;
  stroke-linejoin:round; opacity:0;
}
/* 線から文章への引き出し線 */
.cn{ fill:none; stroke:var(--pale); stroke-width:1; vector-effect:non-scaling-stroke; }

/* 役割 */
.node--role h2{ font-size:clamp(23px,3.3vw,36px); }
.why{ font-family:var(--mincho); font-size:clamp(18px,2.5vw,27px); letter-spacing:.12em; color:var(--accent); }

/* プロセス */
.node--step h3{ font-size:clamp(21px,2.7vw,29px); display:flex; align-items:baseline; gap:16px; }
.node--right h3{ flex-direction:row-reverse; }
.node--step h3 span{ font-family:var(--num); font-weight:200; font-size:.62em; color:var(--pale); }
.lead{ font-family:var(--mincho); font-size:clamp(16px,2vw,21px); line-height:2.2; }

/* 終着：線がそのまま平屋と木になる（絵は線と同じパスなので、ここには器だけ置く） */
.node--fin{
  min-height:150vh; max-width:none; width:100%;
  display:grid; justify-items:center; align-content:end; text-align:center;
  padding-bottom:clamp(48px,8vh,110px);
}
.fin__cap{ font-family:var(--mincho); font-size:clamp(16px,2.1vw,22px); letter-spacing:.12em; }

/* =========================================================
   線のあと（静かな組版）
   ========================================================= */
.sec{
  max-width:var(--col); margin:0 auto; padding:clamp(110px,17vh,190px) var(--pad);
}
.sec > * + *{ margin-top:26px; }
.sec__h{ font-size:clamp(23px,3.3vw,36px); }

.ph{ aspect-ratio:16/10; background:var(--ph); display:grid; place-items:center; margin-top:36px; }
.ph span{ font-family:var(--num); font-size:11px; letter-spacing:.3em; color:var(--pale); }

/* =========================================================
   一覧（施工事例・写真・コラム）
   トップは「入口」。3件だけ横に並べて、続きは一覧ページへ送る。
   ここを縦に積むと、線を見終わったあとのスクロールが長くなりすぎる。
   ========================================================= */
.sec--wide{ max-width:min(92vw,1080px); }
/* 見出しは「施工事例」。その下に、これまでのコピーを添える */
.sec > .sec__sub{ margin-top:14px; }
.sec__sub{
  font-family:var(--mincho); font-size:clamp(17px,2.3vw,24px);
  line-height:2.1; letter-spacing:.09em; color:var(--grey);
}
.sec__sub span, .card__q span{ display:inline-block; }
.sec__sub, .card__q{ text-wrap:balance; }

/* ---- 施工事例：写真のある事例だけを横並び ----
   枚数を固定しない。«中身がある事例» が増えたぶんだけ列が増える。
   以前は3枚固定で、中身のない CASE をプレースホルダーで埋めていた。 */
.sec > .cards{ margin-top:clamp(48px,7vh,80px); }
.cards{ display:grid; gap:clamp(24px,3vw,40px); grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
/* 見出しの行数がカードごとに違うので、下端（この家のはなし）だけ揃える */
.card{ display:flex; flex-direction:column; }
.card__ph{ aspect-ratio:4/3; background:var(--ph); display:grid; place-items:center; overflow:hidden; }
.card__ph span{ font-family:var(--num); font-size:11px; letter-spacing:.3em; color:var(--pale); }
.card:hover .card__ph{ opacity:.86; transition:opacity .6s var(--ease); }
/* 実写真が入ったカード。グレーの «PHOTO» 板と同じ形のまま、中身だけ差し替わる */
.card__ph--img{ background:none; }
.card__ph--img img{ width:100%; height:100%; object-fit:cover; display:block; }
.card .sheet{ margin-top:18px; }
.card__q{ margin-top:12px; font-size:clamp(16px,1.5vw,19px); line-height:1.95; }
.card__a{ margin-top:14px; font-family:var(--mincho); font-size:14.5px; line-height:2.2; color:var(--grey); }
.card__more{ margin-top:auto; padding-top:18px; font-family:var(--num); font-size:11.5px; letter-spacing:.22em; color:var(--grey); }
.card__more::after{ content:" →"; }
.card:hover .card__more{ color:var(--accent); }

/* ---- 写真：文字を減らして、枚数で見せる。撮ったら1行足すだけ ---- */
.sec > .strip{ margin-top:clamp(48px,7vh,80px); }
.strip{ display:grid; gap:clamp(12px,1.6vw,20px); grid-template-columns:repeat(6,1fr); }
.strip .ph{ aspect-ratio:1/1; margin-top:0; }
.strip a:hover .ph{ opacity:.86; transition:opacity .6s var(--ease); }
/* 写真が入った枠。グレーの «PHOTO» 板と同じ形のまま、中身だけ実写真に差し替わる。
   place-items:center のままだと縮んで真ん中に置かれるので、面いっぱいに伸ばす */
.ph--img{ background:none; overflow:hidden; }
.ph--img img{ width:100%; height:100%; object-fit:cover; display:block; }
/* 「2026.07　大阪／北浜」。日付は数字書体で、場所より一段うすく。
   説明文をやめて日付と場所だけにしたので、この2つの区別が付くようにする */
.strip__cap{ margin-top:10px; font-size:12.5px; line-height:1.8; letter-spacing:.06em; color:var(--grey);
  display:flex; align-items:baseline; gap:12px; }
.strip__cap time{ font-family:var(--num); font-size:11px; letter-spacing:.18em; color:var(--pale); flex:none; }
.strip a:hover .strip__cap{ color:var(--grey); }

/* ---- コラム：日付＋見出しの羅列。記事が増えても1行ずつ ---- */
.sec > .list{ margin-top:clamp(40px,6vh,64px); }
.list{ border-top:1px solid var(--rule); }
.list a{
  display:grid; grid-template-columns:104px 1fr; gap:20px; align-items:baseline;
  padding:22px 0; border-bottom:1px solid var(--rule); transition:.4s var(--ease);
}
.list a:hover{ padding-left:8px; }
.list time{ font-family:var(--num); font-size:12px; letter-spacing:.16em; color:var(--pale); }
.list h3{ font-size:clamp(15.5px,1.7vw,18.5px); line-height:1.95; }
.list a:hover h3{ color:var(--accent); }
.list p{ margin-top:8px; font-size:13.5px; line-height:2.1; color:var(--grey); }
/* できることも同じ «1行ずつ» の形で並べる。左は日付ではなく通し番号 */
.list__no{ font-family:var(--num); font-size:12px; letter-spacing:.16em; color:var(--pale); }

/* ---- 私のこと：顔と名前だけの入口。全体がボタン ---- */
.sec > .me-card{ margin-top:clamp(40px,6vh,64px); }
.me-card{ display:grid; grid-template-columns:minmax(0,260px) 1fr; gap:clamp(28px,5vw,56px); align-items:center; }
.me-card__ph{ margin:0; background:var(--ph); aspect-ratio:614/671; overflow:hidden; }
.me-card__ph img{ width:100%; height:100%; object-fit:cover; transition:opacity .6s var(--ease); }
.me-card:hover .me-card__ph img{ opacity:.86; }
.me-card__txt > * + *{ margin-top:14px; }
.me-card__txt .body{ margin-top:22px; }
.me-card__btn{
  margin-top:32px; display:inline-block;
  font-family:var(--mincho); font-size:18px; letter-spacing:.16em;
  border-bottom:1px solid var(--rule); padding-bottom:10px; transition:.5s var(--ease);
}
.me-card__btn::after{ content:" →"; }
.me-card:hover .me-card__btn{ color:var(--accent); border-color:var(--accent); }

/* ---- できること：線画アイコンの一覧（案C）----
   写真は «その案件» の絵だが、アイコンは «仕事の種類» の絵。
   トップは入口なので、6つを記号として一望させるだけにする。
   線の細さは、このサイトの一本の線と揃えてある。 */
.sec > .svcgrid{ margin-top:clamp(44px,6vh,72px); }
.svcgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(26px,4vw,52px) clamp(24px,4vw,48px); }
.svcgrid a{ display:block; }
.svcgrid svg{ width:48px; height:48px; display:block; color:var(--ink); transition:color .4s var(--ease); }
.svcgrid svg *{ vector-effect:non-scaling-stroke; }
.svcgrid a:hover svg{ color:var(--accent); }
.svcgrid h3{ margin-top:18px; font-size:clamp(15px,1.7vw,17.5px); line-height:1.9; }
.svcgrid a:hover h3{ color:var(--accent); }
.svcgrid .no{ margin-top:8px; font-family:var(--num); font-size:10.5px; letter-spacing:.22em; color:var(--pale); }
.svcgrid p{ margin-top:10px; font-size:13px; line-height:2.1; color:var(--grey); }
@media (max-width:860px){ .svcgrid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .svcgrid{ grid-template-columns:1fr; gap:34px; } }

/* ---- 「その他はこちら」 ---- */
.sec > .more{ margin-top:clamp(36px,5vh,56px); }
.more{ text-align:right; }
.more a{
  font-size:13.5px; letter-spacing:.16em; color:var(--grey);
  border-bottom:1px solid var(--rule); padding-bottom:8px; transition:.5s var(--ease);
}
.more a::after{ content:" →"; }
.more a:hover{ color:var(--accent); border-color:var(--accent); }

.sec--credo{ text-align:center; max-width:min(92vw,900px); }
.sec--credo .body--w{ margin-inline:auto; }
.credo{ font-family:var(--mincho); font-size:clamp(18px,2.6vw,30px); line-height:2.2; letter-spacing:.09em; }
.credo--2{ margin-top:64px !important; }
.credo em{ color:var(--accent); font-style:normal; }

.sec--end{ text-align:center; }
.end__h{ font-size:clamp(23px,3.3vw,36px); }
.end__list{ display:grid; gap:8px; }
.end__list li{ font-size:15px; color:var(--grey); }
.sec--end .body--w{ margin-inline:auto; }
.end__cta{ margin-top:56px !important; }
.end__cta a{
  font-family:var(--mincho); font-size:18px; letter-spacing:.16em;
  border-bottom:1px solid var(--rule); padding-bottom:10px; transition:.5s var(--ease);
}
.end__cta a:hover{ border-color:var(--accent); color:var(--accent); }

/* ---- 話しかける先 ----
   サイト中の «思いを、話してみる» は、ぜんぶここへ集まってくる。
   だから «連絡先» はこの1箇所だけ。増やすとどこから来ても迷う。

   LINE の緑のボタンは使っていない。有彩色は朱1色という決めごとがあり、
   緑を1つ置くとページの中でそこだけ浮くため。
   «公式ボタンらしさ» が要るなら、.way--line の border と color を
   #06C755 にすればLINEらしい見た目にはなる。 */
.end__ways{
  margin-top:52px !important;
  display:flex; flex-wrap:wrap; gap:14px; justify-content:center;
}
.way{
  display:flex; align-items:center; gap:14px; text-align:left;
  border:1px solid var(--rule); padding:16px 24px; min-width:min(92vw,300px);
  transition:.45s var(--ease);
}
.way:hover{ border-color:var(--ink); }
.way__mark{ flex:none; width:26px; height:26px; color:var(--ink); }
.way__mark svg{ width:100%; height:100%; display:block; }
.way__txt b{ display:block; font-weight:400; font-size:15.5px; letter-spacing:.08em; }
.way__txt i{ display:block; margin-top:5px; font-style:normal; font-size:12px; color:var(--pale); letter-spacing:.04em; }
/* 主にしたいほう。押す先が2つあると、どちらでもよく見えてしまう */
.way--line{ border-color:rgba(18,17,15,.34); }
.way--line:hover{ border-color:var(--accent); }
.way--line:hover .way__mark{ color:var(--accent); }
/* ボタンの下の一言。«注意書き» ではなく «もう一声» なので、
   小さくしすぎない。ここで押すかどうかが決まる。 */
.end__note{
  margin-top:34px !important; margin-inline:auto;
  font-size:13.5px; line-height:2.3; color:var(--grey);
  letter-spacing:.04em; max-width:36em;
}
.end__note--last{ margin-top:20px !important; color:var(--pale); }
/* 狭い画面でだけ折る。広い画面では一行で読ませたい */
.br-sp{ display:none; }
@media (max-width:560px){ .br-sp{ display:inline; } }
@media (max-width:560px){
  .end__ways{ flex-direction:column; align-items:stretch; }
  .way{ min-width:0; }
}

/* =============== あらわれ方 =============== */
.js .node__in > *, .js .node--fin > *, .js .sec > *{
  opacity:0; transform:translateY(14px);
}
.js .is-in{ opacity:1 !important; transform:none !important; transition:opacity 1.2s var(--ease), transform 1.2s var(--ease); }

/* =============== レスポンシブ =============== */
@media (max-width:720px){
  .node:not(.node--fin){ min-height:66vh; }   /* 終着ブロックの高さ＝絵を引く時間なので、ここでは潰さない */
  .node--fin{ min-height:104vh; }
  /* 狭い画面では線の脇に寄せず、ふつうに1列で読ませる */
  .node__in{
    position:relative !important; top:auto !important; translate:none !important;
    left:auto !important; right:auto !important;
    width:auto; max-width:none; text-align:left !important;
  }
  .node:not(.node--fin){ display:grid; align-content:center; }
  .node--right h3{ flex-direction:row; }
  .wf{ display:none; }                        /* 狭い画面では散らした言葉は出さない */
  .me-card{ grid-template-columns:1fr; }
  .me-card__ph{ max-width:240px; }
  /* 一覧は縦に積まず、横に流す。ここで積むと縦スクロールが一気に伸びる */
  .cards{
    grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:78%;
    overflow-x:auto; scroll-snap-type:x mandatory;
    padding-bottom:10px; margin-inline:calc(var(--pad) * -1); padding-inline:var(--pad);
    scrollbar-width:none;
  }
  .cards::-webkit-scrollbar{ display:none; }
  .card{ scroll-snap-align:start; }
  /* 画面が狭いと線と文章の距離が詰まる。そのぶん線をさらに引かせる */
  .thread__line{ opacity:.4; }
  .strip{ grid-template-columns:repeat(3,1fr); }
  .list a{ grid-template-columns:1fr; gap:6px; }
  .more{ text-align:left; }
  .pl-t{ font-size:17px; } .pl-n{ font-size:15px; }
}

/* =============== モーション配慮 =============== */
@media (prefers-reduced-motion: reduce){
  .js .node__in > *, .js .node--fin > *, .js .sec > *{ opacity:1; transform:none; }
  .thread__svg, .thread__tip{ display:none; }
}