/* トップページ：左に打刻した見出し、右に本文 */

/* hero */
.hero{padding-block:clamp(40px,8vw,96px) clamp(40px,6vw,72px)}
.docline{margin-bottom:clamp(28px,5vw,48px)}
h1{font-family:var(--f-type);font-weight:400;font-size:var(--s4);line-height:1;margin:0 0 6px;letter-spacing:.02em}
.role{font-family:var(--f-mono);font-size:var(--s1);color:var(--ribbon);margin:0 0 28px;letter-spacing:.06em}
.lead{font-size:var(--s1);line-height:2;max-width:28em;margin:0 0 14px;text-wrap:pretty}
.affil{font-size:var(--s-1);color:var(--ink-soft);margin:0}

/* sections */
section.block{padding-block:clamp(44px,7vw,80px)}
.sub{margin:48px 0 12px}

.prose{max-width:36em}
.prose p{margin:0 0 1.1em}
.fields{margin:24px 0 0;display:grid;max-width:36em}
.fields div{display:grid;grid-template-columns:9em minmax(0,1fr);gap:12px;padding:6px 0;border-bottom:1px dotted var(--ink-soft)}
.fields dt{font-family:var(--f-mono);font-size:var(--s-1);text-transform:uppercase;letter-spacing:.08em;color:var(--ink-soft)}
.fields dd{margin:0}

/* ledger（時系列） */
.ledger{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.ledger li{display:grid;grid-template-columns:10em minmax(0,1fr);gap:16px;padding:16px 0;border-bottom:1px dotted var(--ink-soft)}
@media (max-width:520px){.ledger li{grid-template-columns:1fr;gap:2px}}
.ledger .when{font-family:var(--f-mono);font-size:var(--s-1);font-variant-numeric:tabular-nums;color:var(--ink-soft)}
.ledger h3{font-size:var(--s0);font-weight:700;margin:0}
.ledger p{margin:2px 0 0;color:var(--ink-soft);font-size:.95rem}
.ledger h3 a{font-weight:700}

/* services */
.services{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:0 32px;border-top:1px solid var(--ink)}
.services li{padding:14px 0;border-bottom:1px dotted var(--ink-soft);counter-increment:svc}
.services h4{font-size:var(--s0);font-weight:700;margin:0}
.services h4::before{content:"☑ ";color:var(--ribbon);font-family:var(--f-mono);font-weight:400}
.services p{margin:2px 0 0;font-size:.92rem;color:var(--ink-soft)}

/* skills */
.skills{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:24px 40px}
.skills h3{font-family:var(--f-mono);font-weight:700;font-size:var(--s-1);letter-spacing:.14em;text-transform:uppercase;margin:0 0 8px}
.skills ul{list-style:none;margin:0;padding:0}
.skills li{padding:5px 0;border-bottom:1px dotted var(--rule);font-family:var(--f-mono)}
.off{margin-top:32px;font-family:var(--f-mono);font-size:var(--s-1);color:var(--ink-soft)}
.off strong{font-weight:400;color:var(--ink);font-family:var(--f-jp);font-size:var(--s0)}

/* projects */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 24px}
.filters button{font-family:var(--f-mono);font-size:var(--s-1);letter-spacing:.06em;background:none;border:1px solid var(--ink);color:var(--ink);padding:3px 12px;cursor:pointer}
.filters button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.projects{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:24px}
.project{display:flex;flex-direction:column;background:var(--sheet);border:1px solid var(--rule);box-shadow:3px 3px 0 var(--rule);min-width:0}
.project[hidden]{display:none}
.thumb{padding:18px 18px 4px}
.project.alt .photo{transform:rotate(-.7deg)}
.project .body{padding:16px;display:flex;flex-direction:column;gap:8px;flex:1}
.project .meta{font-family:var(--f-mono);font-size:.75rem;color:var(--ink-soft);display:flex;flex-wrap:wrap;gap:4px 10px}
.project .meta .stamp{color:var(--ribbon);border:1.5px solid var(--ribbon);padding:0 6px;transform:rotate(-2deg)}
.project h3{font-size:var(--s0);font-weight:700;line-height:1.55;margin:0;text-wrap:balance}
.project p{margin:0;font-size:.92rem;line-height:1.8}
.tags{gap:2px 10px;margin:auto 0 0;padding:6px 0 0;font-size:.75rem}
.links{font-family:var(--f-mono);font-size:.78rem;overflow-wrap:anywhere}
.links a::after{content:" →"}

/* contact */
.contact{margin:0;display:grid;max-width:36em;border-top:1px solid var(--ink)}
.contact div{display:grid;grid-template-columns:7em minmax(0,1fr) auto;align-items:center;gap:12px;padding:12px 0;border-bottom:1px dotted var(--ink-soft)}
.contact dt{font-family:var(--f-mono);font-size:var(--s-1);text-transform:uppercase;letter-spacing:.08em;color:var(--ink-soft)}
.contact dd{margin:0;overflow-wrap:anywhere}
button.copy{font-family:var(--f-mono);font-size:var(--s-1);background:none;border:1px solid var(--ink);color:var(--ink);padding:2px 10px;cursor:pointer}
button.copy:hover{background:var(--ink);color:var(--paper)}