/* base reset */
img{max-width:100%;height:auto}
[hidden]{display:none!important}
:root{
  color-scheme:light;
  --ink:#13161b;
  --ink-2:#3d454f;
  --ink-3:#6d7681;
  --paper:#f3f4f1;
  --surface:#fbfbf9;
  --surface-2:#eceee9;
  --line:#d6d9d2;
  --line-strong:#b6bbb2;
  --ai:#2b4a6f;
  --ai-soft:#e3e9f0;
  --karashi:#a8791b;
  --karashi-soft:#f2e9d5;
  --shadow:0 1px 0 rgba(19,22,27,.04), 0 8px 24px -18px rgba(19,22,27,.35);
  --serif:"Zen Old Mincho",'Hiragino Mincho ProN','Yu Mincho',serif;
  --sans:"Zen Kaku Gothic New",'Hiragino Kaku Gothic ProN','Yu Gothic',sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --step--1:.8125rem;
  --step-0:1rem;
  --step-1:1.1875rem;
  --step-2:1.5rem;
  --step-3:2rem;
  --step-4:2.75rem;
  --step-5:3.5rem;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;--ink:#e8e9e4;
    --ink-2:#b3b8b2;
    --ink-3:#878e88;
    --paper:#0e1116;
    --surface:#161a20;
    --surface-2:#1e232b;
    --line:#2b323b;
    --line-strong:#3d454f;
    --ai:#8fb3d9;
    --ai-soft:#1b2735;
    --karashi:#dfb45c;
    --karashi-soft:#2c2416;
    --shadow:0 1px 0 rgba(0,0,0,.3), 0 10px 30px -20px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;--ink:#e8e9e4;
  --ink-2:#b3b8b2;
  --ink-3:#878e88;
  --paper:#0e1116;
  --surface:#161a20;
  --surface-2:#1e232b;
  --line:#2b323b;
  --line-strong:#3d454f;
  --ai:#8fb3d9;
  --ai-soft:#1b2735;
  --karashi:#dfb45c;
  --karashi-soft:#2c2416;
  --shadow:0 1px 0 rgba(0,0,0,.3), 0 10px 30px -20px rgba(0,0,0,.8);
}
*{box-sizing:border-box}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:var(--step-0);line-height:1.85;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--ai);text-underline-offset:.2em;text-decoration-thickness:1px}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:2px solid var(--ai);outline-offset:2px;border-radius:2px
}
h1,h2,h3,h4{font-family:var(--serif);font-weight:700;line-height:1.35;text-wrap:balance;margin:0}
.eyebrow{
  font-family:var(--mono);font-size:var(--step--1);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);margin:0
}
.wrap{max-width:1060px;margin:0 auto;padding:0 24px}
.prose{max-width:64ch}
.prose p{margin:0 0 1.15em}
.stack{display:flex;flex-direction:column}

/* ---------- header ---------- */
header.site{
  position:sticky;top:0;z-index:40;
  background:color-mix(in srgb,var(--paper) 88%,transparent);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.bar{display:flex;align-items:center;gap:20px;min-height:60px}
.mark{display:flex;align-items:baseline;gap:9px;text-decoration:none;color:var(--ink);flex:none}
.mark .glyph{
  font-family:var(--serif);font-weight:900;font-size:1.05rem;
  border:1.5px solid var(--ink);padding:.05em .38em;line-height:1.15
}
.mark .nm{font-family:var(--serif);font-weight:700;letter-spacing:.06em;font-size:.98rem}
nav.main{display:flex;gap:2px;margin-left:auto;flex-wrap:wrap}
nav.main a{
  font-size:var(--step--1);text-decoration:none;color:var(--ink-2);
  padding:7px 11px;border-radius:3px;white-space:nowrap
}
nav.main a:hover{background:var(--surface-2);color:var(--ink)}
nav.main a[aria-current="page"]{color:var(--ink);box-shadow:inset 0 -2px 0 var(--karashi)}
.theme-btn{
  margin-left:6px;flex:none;background:none;border:1px solid var(--line);color:var(--ink-2);
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;padding:6px 9px;border-radius:3px;cursor:pointer
}
.theme-btn:hover{border-color:var(--line-strong);color:var(--ink)}

/* ---------- page mechanics ---------- */
main{padding-bottom:96px}
.page{padding-top:56px}
@keyframes rise{from{opacity:.35;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.page{animation:none}}

/* ---------- hero ---------- */
.hero{
  display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:44px;align-items:end;
  padding-bottom:44px;border-bottom:1px solid var(--line)
}
.hero h1{font-size:var(--step-5);letter-spacing:-.01em}
.hero .lede{font-size:var(--step-1);color:var(--ink-2);margin:20px 0 0;max-width:34ch}
.namecard{
  border:1px solid var(--line);background:var(--surface);padding:18px 20px;box-shadow:var(--shadow)
}
.namecard dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:4px 14px;font-size:var(--step--1)}
.namecard dt{font-family:var(--mono);color:var(--ink-3);letter-spacing:.04em}
.namecard dd{margin:0;color:var(--ink-2)}
.namecard{
  padding:0;display:grid;grid-template-columns:136px minmax(0,1fr);align-items:start
}
.namecard .portrait{
  display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;object-position:50% 10%;
  border-right:1px solid var(--line);filter:saturate(.96)
}
.namecard .inner{padding:16px 18px}
@media (max-width:420px){
  .namecard{grid-template-columns:1fr}
  .namecard .portrait{border-right:0;border-bottom:1px solid var(--line);object-position:50% 14%}
}
.namecard .who{font-family:var(--serif);font-size:1.4rem;font-weight:700;margin:0 0 2px}
.namecard .roman{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--ink-3);margin:0 0 14px}
@media (max-width:1120px){:root{--step-5:2.95rem}}
@media (max-width:1000px){:root{--step-5:2.55rem}}
@media (max-width:820px){
  .hero{grid-template-columns:1fr;gap:28px;align-items:start}
  :root{--step-5:2.5rem;--step-4:2rem;--step-3:1.65rem}
}

/* ---------- generic sections ---------- */
.sec{padding:56px 0 0}
.sec-head{display:flex;align-items:baseline;gap:16px;margin-bottom:26px;flex-wrap:wrap}
.sec-head h2{font-size:var(--step-3)}
.rule{border:0;border-top:1px solid var(--line);margin:56px 0 0}

/* ---------- cards ---------- */
.grid{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.grid.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cell{background:var(--surface);padding:24px 22px}
.cell h3{font-size:var(--step-1);margin-bottom:8px}
.cell p{margin:0;color:var(--ink-2);font-size:var(--step--1);line-height:1.8}
@media (max-width:820px){.grid.c3,.grid.c2{grid-template-columns:1fr}}

/* ---------- cv ---------- */
dl.cv{margin:26px 0 0;display:flex;flex-direction:column}
dl.cv>div{
  display:grid;grid-template-columns:132px minmax(0,1fr);gap:20px;
  padding:16px 0;border-top:1px solid var(--line)
}
dl.cv>div:last-child{border-bottom:1px solid var(--line)}
dl.cv dt{
  font-family:var(--mono);font-size:var(--step--1);color:var(--ai);
  font-variant-numeric:tabular-nums;letter-spacing:.01em;line-height:1.9
}
dl.cv dd{margin:0;color:var(--ink)}
dl.cv dd b{font-weight:500}
dl.cv dd span{display:block;font-size:var(--step--1);color:var(--ink-3);margin-top:2px}
@media (max-width:640px){
  dl.cv>div{grid-template-columns:1fr;gap:2px}
  dl.cv dt{line-height:1.6}
}

/* ---------- practice tags ---------- */
.taglist{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.taglist li{
  font-size:var(--step--1);border:1px solid var(--line-strong);padding:5px 11px;border-radius:999px;color:var(--ink-2)
}
.taglist li.hot{border-color:var(--karashi);color:var(--karashi);font-weight:500}

/* ---------- phase sequence ---------- */
ol.phases{
  list-style:none;margin:26px 0 0;padding:0;counter-reset:ph;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px
}
@media (max-width:760px){ol.phases{grid-template-columns:1fr}}
ol.phases>li{
  counter-increment:ph;background:var(--surface);border:1px solid var(--line);
  padding:22px 22px 20px;display:flex;flex-direction:column;gap:12px
}
.ph-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.ph-head .n{
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--ai);
  font-variant-numeric:tabular-nums
}
.ph-head .n::before{content:"PHASE " counter(ph,decimal-leading-zero)}
.ph-head .nm{font-family:var(--serif);font-size:var(--step-1);font-weight:700;line-height:1.4}
ol.phases h3{font-size:var(--step-0);font-family:var(--sans);font-weight:700;color:var(--ai);margin:0}
ol.phases p{margin:0;font-size:var(--step--1);color:var(--ink-2)}
ol.phases ul{
  list-style:none;margin:2px 0 0;padding:0;display:flex;flex-direction:column;
  border-top:1px solid var(--line)
}
ol.phases ul li{
  font-size:var(--step--1);color:var(--ink-2);padding:8px 0;border-bottom:1px solid var(--line);
  display:grid;grid-template-columns:14px minmax(0,1fr);gap:8px;line-height:1.6
}
ol.phases ul li::before{content:"—";color:var(--karashi);font-family:var(--mono)}

/* ---------- rakuten principles ---------- */
.prin{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(255px,1fr))}
.prin article{
  border-top:2px solid var(--karashi);background:var(--surface);padding:20px 20px 22px;
  display:flex;flex-direction:column;gap:10px
}
.prin .src{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--ink-3)}
.prin h3{font-size:var(--step-1)}
.prin p{margin:0;font-size:var(--step--1);color:var(--ink-2)}
blockquote.note{
  margin:26px 0 0;padding:16px 20px;background:var(--surface-2);border-left:3px solid var(--line-strong);
  font-size:var(--step--1);color:var(--ink-2)
}
blockquote.note p{margin:0 0 .6em}
blockquote.note p:last-child{margin:0}

/* ---------- guideline index ---------- */
.filters{
  border:1px solid var(--line);background:var(--surface);padding:20px;display:flex;flex-direction:column;gap:18px
}
.f-row{display:flex;flex-direction:column;gap:9px}
.f-label{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{
  font-family:var(--sans);font-size:var(--step--1);background:var(--surface-2);color:var(--ink-2);
  border:1px solid transparent;padding:5px 12px;border-radius:999px;cursor:pointer;line-height:1.5
}
.chip:hover{border-color:var(--line-strong)}
.chip[aria-pressed="true"]{background:var(--ai);border-color:var(--ai);color:var(--paper)}
input.search{
  width:100%;font-family:var(--sans);font-size:var(--step-0);padding:11px 14px;
  border:1px solid var(--line-strong);background:var(--paper);color:var(--ink);border-radius:3px
}
.f-foot{display:flex;align-items:center;gap:16px;flex-wrap:wrap;font-size:var(--step--1);color:var(--ink-3)}
.f-foot label{display:flex;align-items:center;gap:7px;color:var(--ink-2);cursor:pointer}
.btn-plain{
  background:none;border:1px solid var(--line-strong);color:var(--ink-2);font-family:var(--sans);
  font-size:var(--step--1);padding:6px 13px;border-radius:3px;cursor:pointer
}
.btn-plain:hover{border-color:var(--ink-3);color:var(--ink)}
.count{font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--ink)}
.results{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-direction:column}
.results li{padding:20px 0;border-top:1px solid var(--line)}
.results li:last-child{border-bottom:1px solid var(--line)}
.g-title{font-family:var(--serif);font-size:var(--step-1);font-weight:700;line-height:1.5;margin:0 0 6px}
.g-meta{
  display:flex;flex-wrap:wrap;gap:4px 14px;font-family:var(--mono);font-size:11px;
  letter-spacing:.03em;color:var(--ink-3);margin:0 0 8px
}
.g-sum{margin:0 0 10px;font-size:var(--step--1);color:var(--ink-2)}
.g-tags{display:flex;flex-wrap:wrap;gap:5px}
.g-tags span{font-size:11px;padding:3px 9px;border-radius:999px;background:var(--ai-soft);color:var(--ai)}
.g-tags span.fn{background:var(--karashi-soft);color:var(--karashi)}
.results details{margin-top:9px;font-size:var(--step--1);color:var(--ink-2)}
.results summary{cursor:pointer;color:var(--ink-3);font-family:var(--mono);font-size:11px;letter-spacing:.06em}
.empty{padding:44px 0;color:var(--ink-3);text-align:center;border-top:1px solid var(--line)}

/* ---------- blog ---------- */
.post-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.post-list li{border-top:1px solid var(--line);padding:24px 0}
.post-list li:last-child{border-bottom:1px solid var(--line)}
.post-list h3{font-size:var(--step-2);margin:0 0 8px}
.post-list a.pt{text-decoration:none;color:var(--ink)}
.post-list a.pt:hover{color:var(--ai)}
.p-meta{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--ink-3);margin:0 0 10px;
  font-variant-numeric:tabular-nums}
.p-ex{margin:0;color:var(--ink-2);font-size:var(--step--1)}
.badge-draft{
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;background:var(--karashi-soft);
  color:var(--karashi);padding:2px 7px;border-radius:2px;margin-left:8px
}
.article h1{font-size:var(--step-4);margin-bottom:12px}
.article .body{max-width:64ch}
.article .body h2{font-size:var(--step-2);margin:2em 0 .6em}
.article .body h3{font-size:var(--step-1);margin:1.8em 0 .5em}
.article .body p{margin:0 0 1.15em}
.article .body ul,.article .body ol{margin:0 0 1.15em;padding-left:1.3em}
.article .body li{margin:.25em 0}
.article .body blockquote{
  margin:0 0 1.15em;padding:2px 0 2px 18px;border-left:3px solid var(--line-strong);color:var(--ink-2)
}
.article .body code{font-family:var(--mono);font-size:.9em;background:var(--surface-2);padding:.1em .35em;border-radius:2px}
.article .body h4{
  font-family:var(--sans);font-size:var(--step-0);font-weight:700;color:var(--ai);
  margin:1.9em 0 .5em;padding-left:11px;border-left:3px solid var(--karashi);line-height:1.6
}
.article .body figure{
  margin:0 0 1.8em;display:flex;flex-direction:column;gap:9px
}
.article .body figure img{
  display:block;width:100%;height:auto;border:1px solid var(--line);
  background:#fbfbf9;border-radius:2px
}
.article .body figcaption{
  font-size:var(--step--1);color:var(--ink-3);line-height:1.7;
  padding-left:11px;border-left:2px solid var(--line-strong)
}
.article .body sup.fnref{
  font-family:var(--mono);font-size:.66em;font-weight:500;color:var(--karashi);
  margin-left:.15em;vertical-align:super;line-height:0
}
.article .body ol{font-variant-numeric:tabular-nums}
.article .body ol li{margin:.5em 0;overflow-wrap:anywhere}
.article .body a{overflow-wrap:anywhere}
.article .body hr{border:0;border-top:1px solid var(--line);margin:2.4em 0 1.6em}
.article .body hr+p{font-size:var(--step--1);color:var(--ink-3)}
.tw{overflow-x:auto;margin:0 0 1.6em;border:1px solid var(--line)}
.tw table{border-collapse:collapse;width:100%;min-width:480px;font-size:var(--step--1);background:var(--surface)}
.tw th,.tw td{
  border-bottom:1px solid var(--line);border-right:1px solid var(--line);
  padding:10px 13px;text-align:left;vertical-align:top;line-height:1.7
}
.tw th{background:var(--surface-2);font-family:var(--sans);font-weight:700;color:var(--ink)}
.tw tr:last-child td{border-bottom:0}
.tw th:last-child,.tw td:last-child{border-right:0}
.editor{border:1px solid var(--line);background:var(--surface);padding:22px;display:flex;flex-direction:column;gap:14px}
.editor label{display:flex;flex-direction:column;gap:6px;font-family:var(--mono);font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.editor input,.editor textarea{
  font-family:var(--sans);font-size:var(--step-0);padding:10px 12px;border:1px solid var(--line-strong);
  background:var(--paper);color:var(--ink);border-radius:3px;width:100%
}
.editor textarea{min-height:340px;line-height:1.8;resize:vertical;font-size:.95rem}
.editor .row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.btn{
  background:var(--ai);color:var(--paper);border:1px solid var(--ai);font-family:var(--sans);font-size:var(--step--1);
  font-weight:500;padding:9px 18px;border-radius:3px;cursor:pointer
}
.btn:hover{filter:brightness(1.08)}
.btn[disabled]{opacity:.5;cursor:progress}
.msg{font-size:var(--step--1);color:var(--karashi);font-family:var(--mono);font-size:11px;letter-spacing:.05em}
.hint{font-size:var(--step--1);color:var(--ink-3)}

/* ---------- policy / contact ---------- */
.policy ol{margin:0;padding:0;list-style:none;counter-reset:pl}
.policy ol li{
  counter-increment:pl;border-top:1px solid var(--line);padding:22px 0;
  display:grid;grid-template-columns:44px minmax(0,1fr);gap:20px
}
.policy ol li:last-child{border-bottom:1px solid var(--line)}
.policy .num{font-family:var(--mono);font-size:var(--step--1);color:var(--karashi)}
.policy .num::before{content:counter(pl,decimal-leading-zero)}
.policy h3{font-size:var(--step-1);margin-bottom:6px}
.policy p{margin:0;color:var(--ink-2);font-size:var(--step--1)}
.contact{
  margin-top:56px;border:1px solid var(--line-strong);background:var(--surface);padding:30px;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:30px
}
@media (max-width:820px){.contact{grid-template-columns:1fr;gap:22px}}
.contact h2{font-size:var(--step-2);margin-bottom:10px}
.fill{background:var(--karashi-soft);color:var(--karashi);font-family:var(--mono);font-size:11px;
  padding:2px 6px;border-radius:2px;letter-spacing:.04em}
/* ---------- contact form ---------- */
.cform,.cf-done{
  margin-top:32px;border:1px solid var(--line);background:var(--surface);padding:26px;
  display:flex;flex-direction:column;gap:20px
}
.cf-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
@media (max-width:680px){.cf-grid{grid-template-columns:1fr}}
.cform label,.cf-done label{display:flex;flex-direction:column;gap:7px;
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--ink-3)}
.cform label.req{position:relative}
.cform label.req::before{
  content:"REQUIRED";position:absolute;right:0;top:0;font-size:9px;letter-spacing:.14em;color:var(--karashi)
}
.cform input,.cform select,.cform textarea,.cf-done textarea{
  font-family:var(--sans);font-size:var(--step-0);padding:10px 12px;border:1px solid var(--line-strong);
  background:var(--paper);color:var(--ink);border-radius:3px;width:100%
}
.cform textarea{min-height:150px;line-height:1.8;resize:vertical}
.cf-done textarea{min-height:220px;font-family:var(--mono);font-size:12px;line-height:1.8}
.cform input[aria-invalid="true"],.cform textarea[aria-invalid="true"]{border-color:var(--karashi);background:var(--karashi-soft)}
.cf-done{border-color:var(--karashi)}
.addr2,#mailAddr{font-family:var(--mono);letter-spacing:.02em;font-weight:400;font-size:.95em}
footer.site{
  border-top:1px solid var(--line);margin-top:0;padding:34px 0 60px;color:var(--ink-3);font-size:var(--step--1)
}
footer.site .fl{display:flex;gap:22px;flex-wrap:wrap;align-items:baseline}
footer.site .disc{margin:18px 0 0;max-width:78ch;line-height:1.75}