/* ぜろぐらのサイト。
   白地・高密度・装飾ゼロ。色を持つのは Aethel のカードだけ。
   左に名乗りを据え置き、右に軌跡を流す。 */
:root{
  --ink:#141417;
  --ink-2:#4e4e57;
  --ink-3:#8a8a93;
  --ink-4:#c3c3c9;
  --rule:#e7e7ea;
  --paper:#fcfcfd;
  --aethel-bg:#0c0a14;
  --aethel-glow:#a0c4ff;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--paper);color:var(--ink);
  font-family:'Inter','Noto Sans JP',system-ui,sans-serif;
  font-weight:400;font-feature-settings:'tnum' 1;
  line-height:1.9;letter-spacing:.005em;overflow-x:hidden;
}
a{color:inherit}

/* ── 二段組み。左は据え置き、右が流れる ── */
.page{
  max-width:64rem;margin:0 auto;
  padding:clamp(2.5rem,7vw,4.5rem) clamp(1.25rem,5vw,2.5rem);
  display:grid;grid-template-columns:17.5rem minmax(0,1fr);
  gap:clamp(2.5rem,7vw,5rem);align-items:start;
}
@media (max-width:820px){
  .page{grid-template-columns:1fr;gap:3rem}
}

/* ── 左：名乗り ── */
.card{position:sticky;top:clamp(2.5rem,7vw,4.5rem)}
@media (max-width:820px){.card{position:static}}
/* 線画の紙（243,243,243）はページ地（252,252,253）より暗く、左下に影もある。
   白レベルを少し持ち上げたうえで、端をマスクで溶かして境界を消す。 */
.portrait{
  width:100%;max-width:12.5rem;height:auto;
  display:block;margin-bottom:1.6rem;
  mix-blend-mode:multiply;filter:brightness(1.045);
  -webkit-mask-image:radial-gradient(ellipse 74% 76% at 50% 46%, #000 52%, transparent 100%);
  mask-image:radial-gradient(ellipse 74% 76% at 50% 46%, #000 52%, transparent 100%);
}
.portrait-ph{
  display:flex;align-items:center;justify-content:center;text-align:center;
  font-size:.66rem;color:var(--ink-3);line-height:1.7;border:1px solid var(--rule);
}
.name{
  font-size:1.9rem;font-weight:600;letter-spacing:-.015em;
  line-height:1.2;margin-bottom:1.3rem;
}
.card p{font-size:.9rem;line-height:1.95;color:var(--ink-2)}
.card p + p{margin-top:.9rem}
.en{
  font-size:.84rem;line-height:1.85;color:var(--ink-2);
  padding-bottom:1.1rem;margin-bottom:1.1rem;border-bottom:1px solid var(--rule);
}
.card strong{color:var(--ink);font-weight:500}
.card a{text-decoration:none;border-bottom:1px solid var(--ink-4);transition:border-color .25s}
.card a:hover{border-color:var(--ink)}
.card-more{margin-top:1.6rem !important;font-size:.86rem !important}
.card-links{
  margin-top:2rem;padding-top:1.4rem;border-top:1px solid var(--rule);
  display:flex;gap:1.1rem;flex-wrap:wrap;
}
.card-links a{font-size:.8rem;color:var(--ink-3);border:none}
.card-links a:hover{color:var(--ink)}

/* ── 右：節 ── */
.col > section + section{margin-top:clamp(3rem,8vw,4.5rem)}
h2{
  font-size:.76rem;font-weight:600;letter-spacing:.16em;
  color:var(--ink-3);margin-bottom:1.5rem;text-transform:uppercase;
}

/* ── 作ったもの。黒は星を覗く小窓だけに留める ── */
.work{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:clamp(1.1rem,3.5vw,1.5rem);align-items:center;
  text-decoration:none;border-radius:5px;
  border:1px solid var(--rule);background:var(--paper);
  padding:clamp(1.1rem,3.5vw,1.4rem);
  transition:border-color .35s, transform .45s cubic-bezier(.16,.8,.3,1);
}
.work + .work{margin-top:.8rem}
.work:hover{border-color:var(--ink-4);transform:translateY(-1px)}
.work-icon{
  width:76px;height:76px;flex:none;border-radius:14px;
  display:block;background:var(--aethel-bg);
}
.work h3{font-size:1.2rem;font-weight:600;letter-spacing:.005em;line-height:1.4;margin-bottom:.25rem}
.work p{font-size:.86rem;color:var(--ink-2);line-height:1.8}
@media (max-width:360px){        /* Pixel 9a(412) や iPhone(390) では横並びのまま収まる */
  .work{grid-template-columns:1fr;gap:1rem}
}

/* ── 書いたもの。媒体は必ず出す（note 以外に書く日が来るので） ── */
.posts{list-style:none}
.posts li + li{border-top:1px solid var(--rule)}
.posts a{
  display:grid;grid-template-columns:5.5rem minmax(0,1fr) auto;gap:1rem;
  align-items:baseline;padding:.95rem 0;text-decoration:none;
  transition:opacity .25s;
}
.posts a:hover{opacity:.55}
.posts time{
  font-size:.74rem;color:var(--ink-3);
  font-variant-numeric:tabular-nums;letter-spacing:.04em;
}
.posts .title{font-size:.94rem;line-height:1.8}
.posts .src{
  font-size:.66rem;letter-spacing:.1em;color:var(--ink-3);
  border:1px solid var(--rule);border-radius:2px;padding:.12rem .45rem;
  white-space:nowrap;
}
@media (max-width:560px){
  .posts a{grid-template-columns:auto 1fr;gap:.15rem .7rem}
  .posts time{order:-2}
  .posts .src{order:-1;justify-self:start}
  .posts .title{grid-column:1/-1}
}

/* ── 連絡 ── */
.contact-lead{font-size:.94rem;color:var(--ink-2)}
.contact-lead a{text-decoration:none;border-bottom:1px solid var(--ink-4)}
.contact-lead a:hover{border-color:var(--ink)}

/* ── 年表（about） ── */
.timeline{list-style:none;margin-top:.5rem}
.timeline li{
  display:grid;grid-template-columns:5rem minmax(0,1fr);gap:1rem;
  align-items:baseline;padding:.7rem 0;border-top:1px solid var(--rule);
  font-size:.92rem;color:var(--ink-2);
}
.timeline span{
  font-size:.74rem;color:var(--ink-3);
  font-variant-numeric:tabular-nums;letter-spacing:.04em;
}

.copy{
  margin-top:clamp(3rem,8vw,4rem);padding-top:1.5rem;
  border-top:1px solid var(--rule);
  font-size:.7rem;color:var(--ink-4);letter-spacing:.08em;
}

/* ── 語り（about） ── */
.story{max-width:38rem;margin:0 auto;padding:clamp(3rem,8vw,5rem) clamp(1.25rem,5vw,2rem) 4rem}
.story h1{
  font-size:clamp(1.5rem,4.4vw,2rem);font-weight:600;
  line-height:1.6;letter-spacing:-.01em;margin-bottom:2.5rem;
}
.story p{font-size:clamp(.98rem,2.5vw,1.05rem);line-height:2.25;color:var(--ink-2)}
.story p + p{margin-top:1.7rem}
.story strong{color:var(--ink);font-weight:500}
.story h3{
  font-size:.88rem;font-weight:600;letter-spacing:.06em;color:var(--ink);
  margin:3.5rem 0 1.4rem;
}
.story .close{color:var(--ink);font-weight:500}
.story a{text-decoration:none;border-bottom:1px solid var(--ink-4)}
.story a:hover{border-color:var(--ink)}
.back{display:inline-block;margin-top:clamp(2.5rem,7vw,3.5rem);font-size:.86rem;color:var(--ink-3);text-decoration:none}
.back:hover{color:var(--ink)}