/* ==================================================================
   Aria works（ポートフォリオ）の見た目

   一覧と個別ページで共通。白を基調に、サムネイルは角丸と淡い影。
   ハブ（トップページ）と同じ色を使っています。
================================================================== */
:root{
  --bg:#fff;
  --ink:#2c2a2e;
  --sub:#8d8790;
  --line:#e8e5e9;
  --accent:#b68fa8;
  --hover:#faf7f9;
  --radius:14px;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",YuGothic,Meiryo,system-ui,sans-serif;
  line-height:1.85; -webkit-text-size-adjust:100%;
}
a{color:inherit}
img{display:block}

/* --- 頭 ------------------------------------------------------------ */
.top{max-width:1240px; margin:0 auto; padding:34px 22px 14px}
.top .name{
  margin:0; font-size:1.8rem; font-weight:400;
  letter-spacing:.26em; text-indent:.26em;
  font-family:"Hiragino Mincho ProN","Yu Mincho",YuMincho,"MS PMincho",serif}
.top .name a{text-decoration:none}
/* ナビは題名より上。ポートフォリオの外への行き先なので、
   「Aria works」の一部に見えないようにしています */
.top nav{display:flex; gap:24px; margin:0 0 14px; flex-wrap:wrap}
.top nav a{
  font-size:.8rem; letter-spacing:.12em; color:var(--sub); text-decoration:none;
  padding-bottom:4px; border-bottom:1px solid transparent;
  transition:color .15s, border-color .15s}
.top nav a:hover{color:var(--ink); border-color:var(--accent)}

/* --- 分類のタブ ---------------------------------------------------- */
.tabs{
  max-width:1240px; margin:0 auto; padding:10px 22px 0;
  display:flex; gap:8px; flex-wrap:wrap}
.tabs button{
  border:1px solid var(--line); background:#fff; color:var(--sub);
  border-radius:999px; padding:8px 18px; font:inherit; font-size:.85rem;
  cursor:pointer; transition:background .15s, color .15s, border-color .15s}
.tabs button:hover{background:var(--hover)}
.tabs button[aria-selected="true"]{
  background:var(--ink); border-color:var(--ink); color:#fff}

/* --- 一覧 ---------------------------------------------------------- */
.grid{
  max-width:1240px; margin:0 auto; padding:22px 22px 60px;
  display:flex; gap:20px; align-items:flex-start}
.col{flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:20px}

.card{text-decoration:none; display:block}
.card .shot{
  width:100%; border-radius:var(--radius); overflow:hidden; background:#f4f2f5;
  box-shadow:0 2px 8px rgba(60,40,55,.12);
  transition:box-shadow .18s, transform .18s}
.card:hover .shot{box-shadow:0 8px 20px rgba(60,40,55,.13); transform:translateY(-2px)}
.card .shot img{width:100%; height:100%; object-fit:cover}
.card .nm{
  margin-top:10px; font-size:.86rem; line-height:1.55; font-weight:700;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden}

/* 読み込み中 */
.more{text-align:center; color:var(--sub); font-size:.78rem; padding:10px 0 40px}

/* --- 個別ページ ---------------------------------------------------- */
.work{max-width:1240px; margin:0 auto; padding:18px 22px 70px;
  display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:34px; align-items:start}
.work .shots{display:flex; flex-direction:column; gap:18px}
/* 個別ページの絵は、角丸も影も付けません。
   作品そのものを見せる場所なので、余計な装飾を挟まない */
.work .shots img{width:100%; height:auto}
.work .side{position:sticky; top:24px}
.work h1{
  margin:0 0 14px; font-size:1.25rem; line-height:1.6; font-weight:700;
  letter-spacing:.02em}
.work .body{
  font-size:.88rem; line-height:1.95; white-space:pre-wrap; word-break:break-word}
.work .body a{color:#9c6b8a}
.work .tags{display:flex; gap:7px; flex-wrap:wrap; margin-top:18px}
.work .tags span{
  border:1px solid var(--line); border-radius:999px;
  padding:4px 13px; font-size:.75rem; color:var(--sub)}
.work .back{
  display:inline-block; margin-top:26px; font-size:.8rem; color:var(--sub);
  text-decoration:none; border-bottom:1px solid var(--line); padding-bottom:2px}
.work .back:hover{color:var(--ink); border-color:var(--accent)}

footer{
  margin:0 auto; max-width:1240px; padding:24px 22px 40px;
  border-top:1px solid var(--line);
  text-align:center; color:var(--sub); font-size:.68rem; letter-spacing:.1em}

@media (max-width:860px){
  .top{padding:24px 18px 12px}
  /* 「Aria works」は字間が広いので、狭い画面でははみ出します。
     文字を少し小さく、字間も詰めます */
  .top .name{font-size:1.24rem; letter-spacing:.14em; text-indent:.14em}
  .tabs{padding:8px 18px 0}
  .grid{gap:12px; padding:16px 18px 50px}
  .col{gap:12px}
  .card .nm{font-size:.8rem; margin-top:8px}
  .work{grid-template-columns:minmax(0,1fr); gap:22px; padding:14px 18px 60px}
  /* 縦に積むときは、題名と説明を絵より先に出します。
     何の絵なのか分かってから見てもらうため */
  .work .side{position:static; order:-1}
  /* 説明と絵のあいだに物を挟まない。
     分類も「作品一覧へ」も、上のナビから辿れるので出しません */
  .work .tags, .work .back{display:none}
  .work h1{font-size:1.1rem}
}