/* orcadragon.org — lugiaxetomxv.net の House と同じトークン・同じ書体・同じ部品の言葉で組んだ 1 枚の名刺。
   色と書体の値は astro-migration/site/src/layouts/House.astro の :root と同じ。 */
:root{
  --sumi:   oklch(0.165 0.012 300);
  --sumi-2: oklch(0.205 0.012 300);
  --sumi-3: oklch(0.245 0.012 300);
  --rule:   oklch(0.33 0.012 300);
  --rule-2: oklch(0.46 0.012 300);
  --mute:   oklch(0.75 0.012 300);
  --bone:   oklch(0.935 0.013 90);
  --lav:    oklch(0.79 0.075 300);
  --matcha: oklch(0.79 0.095 122);

  --f-ja: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --f-disp: "Shippori Mincho B1", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --f-label: "Chakra Petch", "Zen Kaku Gothic New", sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, monospace;

  --pad: clamp(20px, 5vw, 72px);
  --max: 1040px;
  --chamfer: 14px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}
*,*::before,*::after{box-sizing:border-box}
html{scrollbar-color:var(--rule-2) var(--sumi)}
body{
  margin:0;color:var(--bone);
  font-family:var(--f-ja);font-size:1rem;line-height:1.85;
  -webkit-font-smoothing:antialiased;overflow-x:clip;
}
::selection{background:var(--lav);color:var(--sumi)}
a{color:var(--lav)}
:focus-visible{outline:2px solid var(--lav);outline-offset:3px}
[lang="en"]{font-family:var(--f-label)}
p{margin:0}

/* ---------- 三角メッシュの地（House の canvas の静止画と同じ格子：一辺 34px・重心へ 0.8 倍・線 rgba(205,196,228,.065)。
   ここでは波を出さないので、canvas ではなく SVG の敷き模様にした。JS なしで同じ見た目。
   House の canvas は画面に固定だが、静止した模様なので、文書といっしょに流れる html の背景に置く（全面の画面写しでも途切れない） ---------- */
html{background:var(--sumi) url(mesh.svg) 0 0 repeat}

/* ---------- グリフ（House と同じ：線はラベンダー、点はグラファイト、線が通った点はラベンダー） ---------- */
.glyph{display:block;overflow:visible;--gc:var(--lav)}
.glyph .seg{fill:none;stroke:var(--gc);stroke-linecap:round}
.glyph .dot{fill:var(--rule-2);transition:fill .22s}
.glyph .dot.hit{fill:var(--gc)}
/* 描く前（welcome と同じ）：線は消え、点は消灯。線が点に届くと .lit で灯る。
   線は長さより少し先（.05）まで送って隠す：長さちょうどだと、丸めの差の短い破線の丸い端が始点にラベンダーの丸として残る */
html.motion .glyph.anim:not(.drawn) .seg{stroke-dasharray:var(--len) calc(var(--len) + 20px);stroke-dashoffset:calc(var(--len) + .05px)}
html.motion .glyph.anim:not(.drawn) .dot.hit{fill:var(--rule-2)}
html.motion .glyph.anim:not(.drawn) .dot.hit.lit{fill:var(--gc)}
.glyph.reset .dot{transition:none}

.wrap{max-width:calc(var(--max) + 2*var(--pad));margin:0 auto;padding:clamp(56px,13vh,150px) var(--pad) 0}

/* ---------- 名刺：龍の印 ＋ ドメイン名・名前・ひとこと ---------- */
.card{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:start}
.mark{display:grid;gap:12px;justify-items:start;padding-top:.4rem}
.mark .glyph{width:clamp(112px,15vw,188px);height:auto;aspect-ratio:1}
.mark .gl{display:flex;align-items:baseline;gap:.55em;line-height:1.2}
/* 読み「ドラゴン どらごん」は 2 段組みの狭い幅（〜820px）で印（112px〜）より長い。列の幅は印だけで決め（幅 0＋min-width 100%）、
   入りきらないときは読みを名の下へ折り返す。名と読みの間の行間は詰める */
.mark .gl{flex-wrap:wrap;row-gap:.1em;width:0;min-width:100%}
.mark .gl b{font-family:var(--f-disp);font-weight:700;font-size:clamp(1rem,1.3vw,1.2rem)}
.mark .gl span{font-size:.78rem;color:var(--mute)}
/* 印の場所の 2 つのグリフ（ドラゴン・イルカ）と 2 つの名札は、それぞれ同じ升に重ねる。升の大きさはドラゴンの側（長いほう）で決まるので、
   イルカを出している間も高さは変わらない。名札の升も上の幅 0＋min-width 100% と同じ決め方（列の幅は印だけで決まる） */
.mark .mk-g,.mark .mk-c{display:grid}
.mark .mk-g > *,.mark .mk-c > *{grid-area:1/1}
.mark .mk-c{width:0;min-width:100%}
/* JS なし・reduced-motion：ドラゴンと名札だけ（最後の姿） */
.mark .mk-i{visibility:hidden}
/* 動くとき（下の .p2・.fin は src/index.html のスクリプトが付ける）：
   はじめはイルカの板（線は上の :not(.drawn) で隠れる）、ドラゴンと名札は隠す。.p2 でイルカからドラゴンへ、.fin でドラゴンの名札を出したまま */
html.motion .mark .mk-i{visibility:visible}
html.motion .mark .gl,
html.motion .mark:not(.p2) .glyph.mk-d,
html.motion .mark.p2 .glyph.mk-i{opacity:0}
html.motion .mark.fin .gl.mk-d{opacity:1}
/* 押すともう一度描く（ボタンはグリフの升だけ。名札の幅の決め方を変えないよう、.mark そのものは縮めない） */
.mark .mk-g[role="button"]{cursor:pointer;-webkit-tap-highlight-color:transparent}

.word{
  margin:0;font-family:var(--f-disp);font-weight:800;font-size:clamp(2.1rem,10.6vw,5.6rem);
  line-height:1.08;letter-spacing:.02em;overflow-wrap:anywhere;
}
.word .tld{color:var(--mute)}

/* 名前は 2 行（welcome の家主の欄と同じ：1 行目 LugiAXE Tom_XV、2 行目 龙紫熏＋Torn＋読み） */
.handle{margin-top:clamp(18px,3vh,28px);font-family:var(--f-label);font-weight:600;font-size:clamp(1.2rem,1.9vw,1.5rem);letter-spacing:.02em;line-height:1.5}
.handle .h-l1,.handle .h-l2{display:block}
.handle .h-l2{margin-top:.15em;line-height:1.6}
.handle .h-zh{font-family:var(--f-disp);font-weight:700;letter-spacing:.06em}
.handle .h-py{font-weight:500;font-size:.68em;letter-spacing:.03em;color:var(--mute);white-space:nowrap}

.intro{margin-top:clamp(20px,3.4vh,30px);max-width:32em;color:var(--mute);word-break:auto-phrase;overflow-wrap:anywhere}

/* ---------- 見出しと罫（House と同じ形。名刺なので一段小さく） ---------- */
.sec{padding-top:clamp(72px,12vh,128px)}
.sec-h{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 16px;margin:0 0 14px;font-weight:400}
.sec-h .ja{font-family:var(--f-disp);font-weight:700;letter-spacing:.04em;font-size:clamp(1.4rem,2.4vw,1.9rem);line-height:1.25}
.sec-h .en{font-family:var(--f-label);font-weight:500;font-size:.95rem;letter-spacing:.08em;color:var(--mute)}
.sec-rule{position:relative;height:1px;background:var(--rule);margin:0 0 clamp(24px,4vh,36px)}
.sec-rule::after{content:"";position:absolute;left:0;top:0;height:1px;width:clamp(80px,14%,160px);background:var(--lav)}

/* ---------- リンクの札（welcome の .tool と同じ面取りの枠：外の面が線、内の面が地） ---------- */
.links li{display:grid}
.links{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,20px)}
.lk{
  position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name ico" "to to";
  gap:6px 12px;padding:20px 20px 18px 22px;
  color:var(--bone);text-decoration:none;background:var(--rule);
  clip-path:polygon(0 0, calc(100% - var(--chamfer)) 0, 100% var(--chamfer), 100% 100%, 0 100%);
  transition:background .2s;
}
.lk::before{content:"";position:absolute;inset:1px;background:var(--sumi-2);clip-path:polygon(0 0, calc(100% - var(--chamfer) + 0.41px) 0, 100% calc(var(--chamfer) - 0.41px), 100% 100%, 0 100%)}
.lk > *{position:relative;z-index:1}
.lk-name{grid-area:name;font-weight:700;font-size:1.25rem;line-height:1.3}
.lk-name[lang="en"]{font-weight:600;letter-spacing:.02em}
.lk-to{grid-area:to;font-weight:500;font-size:.84rem;line-height:1.5;letter-spacing:.02em;color:var(--mute);overflow-wrap:anywhere}
.lk svg{grid-area:ico;width:18px;height:18px;margin-top:4px;color:var(--mute);transition:color .2s, transform .3s var(--ease)}
.lk:hover,.lk:focus-visible{background:var(--lav)}
.lk:hover svg,.lk:focus-visible svg{color:var(--lav);transform:translate(3px,-3px)}
.lk:focus-visible{outline:none}
.lk:focus-visible::before{inset:2px;clip-path:polygon(0 0, calc(100% - var(--chamfer) + 0.83px) 0, 100% calc(var(--chamfer) - 0.83px), 100% 100%, 0 100%)}/* キーボードの焦点は枠を 2px に（clip-path が outline を切るので、枠そのものを太くする） */

/* ---------- PDS のひとこと（動いている基盤なので抹茶） ---------- */
.pds{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 14px;margin-top:clamp(24px,4vh,34px);font-size:.9rem;color:var(--mute)}
.pds-tag{font-weight:600;font-size:.78rem;letter-spacing:.1em;color:var(--matcha);padding-left:10px;border-left:2px solid var(--matcha);line-height:1.2}
.pds code{font-family:var(--f-mono);font-size:.92em;color:var(--bone)}

/* ---------- サイン ---------- */
.sign{display:flex;justify-content:flex-end;margin-top:clamp(56px,9vh,96px)}
.sign img{display:block;width:200px;max-width:60%;height:auto;opacity:.92}

/* ---------- フッター ---------- */
.foot{max-width:calc(var(--max) + 2*var(--pad));margin:clamp(40px,7vh,72px) auto 0;padding:0 var(--pad) 40px}
.foot p{padding-top:18px;border-top:1px solid var(--rule);font-weight:500;font-size:.85rem;letter-spacing:.06em;color:var(--mute)}

/* ---------- レスポンシブ ---------- */
@media (max-width: 860px){
  .links{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width: 640px){
  .card{grid-template-columns:1fr;gap:24px}
  .mark{padding-top:0}
}
@media (max-width: 480px){
  .links{grid-template-columns:1fr}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{transition:none !important}
}