/* Joe's ArtLab 返回連結（共用）
   用法：<link rel="stylesheet" href="../css/joelogo.css">
   <div class="title-block"><a class="joelogo-button" href="../index.html">Joe's ArtLab</a></div>
   顏色沿用頁面的 CSS 變數（--ink / --paper / --rule / --accent），未定義時使用下列預設值。 */

.title-block{
  max-width:1180px; margin:0 auto; padding:6px 24px 8px;
  display:flex; align-items:center;
  
}
.joelogo-button{
  display:inline-flex; align-items:center; gap:12px; min-height:44px;
  font-size:15px; font-weight:600; letter-spacing:.22em; line-height:1;
  color:var(--ink,#0b0b0b); text-decoration:none; touch-action:manipulation;
  transition:color .2s ease-out;
}
.joelogo-button::before{
  content:""; width:14px; height:14px; flex:none;
  background:var(--accent,#5c2330); border:2px solid var(--accent,#5c2330);
  box-shadow:inset 0 0 0 2px var(--paper,#f2ecd8);
  transition:transform .3s ease-out;
}
.joelogo-button:hover{color:var(--accent,#5c2330)}
.joelogo-button:hover::before{transform:rotate(45deg)}
.joelogo-button:focus-visible{outline:2px solid var(--ink,#0b0b0b); outline-offset:4px}

@media (max-width:860px){
  .title-block{padding:2px 14px 4px; background-position:14px 100%; background-size:calc(100% - 28px) 1px}
  .joelogo-button{font-size:14px}
}
@media (prefers-reduced-motion:reduce){
  .joelogo-button,.joelogo-button::before{transition:none}
}
.title{font-size:13px;color:var(--mute)}
header{grid-column:1/-1;display:flex;align-items:baseline;gap:14px;padding:10px 18px;border-bottom:1px solid var(--line)}