/* Layout: sticky brand bar → compact week hero with Teto → 分野×種別 finder + topic stream (main) | research / events / archive rail (side) */
:root{
  --bg:#F4F5F7; --surface:#FFFFFF; --surface-2:#ECEEF2; --line:#DCDFE5;
  --ink:#1D2026; --muted:#5D6470; --faint:#8A919C;
  --orange:#EA8200; --orange-ink:#B35F00; --orange-soft:#FDEBD3;
  --blue:#0A5CFF; --blue-soft:#E3ECFF;
  --d-ind:#3E6E9E; --d-life:#13917F; --d-med:#D2475F; --d-field:#5F8F22;
  --d-hum:#EA8200; --d-edu:#C79400; --d-cult:#7F55D0; --d-ai:#4C5BD4; --d-hw:#5E6B7A; --d-tech:#5E6B7A;
  --shadow:0 1px 2px rgba(20,24,32,.06),0 4px 14px rgba(20,24,32,.05);
  --f-display:"Dela Gothic One","Hiragino Sans","Noto Sans JP",sans-serif;
  --f-body:"Zen Kaku Gothic New","Hiragino Sans","Noto Sans JP","Yu Gothic",sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#111317; --surface:#1A1D23; --surface-2:#22262E; --line:#2E333C;
  --ink:#ECEEF2; --muted:#A3AAB5; --faint:#7A828E;
  --orange:#FF9A24; --orange-ink:#FFB04F; --orange-soft:#3A2A14;
  --blue:#6E9BFF; --blue-soft:#1C2A48;
  --d-ind:#6F9FD1; --d-life:#3CC2AE; --d-med:#F07A8E; --d-field:#93C35A;
  --d-hum:#FF9A24; --d-edu:#E8BC3A; --d-cult:#A989F0; --d-ai:#8C97F2; --d-hw:#98A4B3; --d-tech:#98A4B3;
  --shadow:none; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#111317; --surface:#1A1D23; --surface-2:#22262E; --line:#2E333C;
  --ink:#ECEEF2; --muted:#A3AAB5; --faint:#7A828E;
  --orange:#FF9A24; --orange-ink:#FFB04F; --orange-soft:#3A2A14;
  --blue:#6E9BFF; --blue-soft:#1C2A48;
  --d-ind:#6F9FD1; --d-life:#3CC2AE; --d-med:#F07A8E; --d-field:#93C35A;
  --d-hum:#FF9A24; --d-edu:#E8BC3A; --d-cult:#A989F0; --d-ai:#8C97F2; --d-hw:#98A4B3; --d-tech:#98A4B3;
  --shadow:none; color-scheme:dark}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:15px;line-height:1.7}
a{color:inherit}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.wrap{max-width:1180px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--surface)}


/* header */
header.bar{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--surface);border-bottom:1px solid var(--line)}
header.bar .wrap{display:flex;align-items:center;gap:20px;padding-block:10px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand img{width:34px;height:34px}
.brand .name{font-family:var(--f-display);font-size:20px;letter-spacing:.01em;line-height:1}
.brand .name small{display:block;font-family:var(--f-mono);font-size:10px;color:var(--faint);letter-spacing:.12em;margin-top:4px}
nav.main{display:flex;gap:4px;flex-wrap:wrap;margin-left:auto}
nav.main a{text-decoration:none;font-size:14px;color:var(--muted);padding:6px 10px;border-radius:6px}
nav.main a:hover{background:var(--surface-2);color:var(--ink)}
@media (max-width:760px){nav.main{display:none}.menu-btn{display:inline-flex!important}}
.menu-btn{display:none;margin-left:auto;background:none;border:1px solid var(--line);color:var(--ink);border-radius:8px;padding:6px 10px;font:inherit;font-size:13px;cursor:pointer}

/* hero */
.hero{background:var(--surface);border-bottom:1px solid var(--line);overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:end;padding-block:26px 0}
.hero .kicker{font-family:var(--f-mono);font-size:12px;color:var(--orange-ink);letter-spacing:.06em}
.hero h1{font-family:var(--f-display);font-weight:400;font-size:clamp(26px,4.4vw,40px);line-height:1.25;margin:6px 0 10px;text-wrap:balance}
.hero h1 em{font-style:normal;color:var(--orange)}
.hero p{margin:0 0 18px;color:var(--muted);max-width:60ch}
.stats{display:flex;gap:22px;flex-wrap:wrap;padding-bottom:22px}
.stats div{font-size:12px;color:var(--muted)}
.stats b{display:block;font-family:var(--f-mono);font-size:22px;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1.2}
.teto{position:relative;display:flex;align-items:flex-end;gap:10px}
.teto img{width:168px;height:168px;display:block}
.bubble{position:absolute;right:150px;top:18px;background:var(--orange);color:#fff;font-size:13px;font-weight:700;padding:8px 12px;border-radius:12px 12px 2px 12px;white-space:nowrap}
@media (max-width:640px){.hero .wrap{grid-template-columns:1fr}.teto{display:none}}

/* circuit divider (motif from the Teto logo) */
.circuit{height:12px;display:flex;align-items:center;gap:0;color:var(--line)}
.circuit i{flex:1;height:2px;background:currentColor}
.circuit s{width:10px;height:10px;border:2px solid currentColor;border-radius:50%;text-decoration:none}

/* main grid */
.grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:28px;padding-block:24px 40px}
@media (max-width:980px){.grid{grid-template-columns:minmax(0,1fr)}}

/* finder */
.finder{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px 16px 12px;box-shadow:var(--shadow)}
.finder h2,.rail h2,.stream-head h2{font-family:var(--f-display);font-weight:400;font-size:18px;margin:0;display:flex;align-items:center;gap:8px}
.mark{width:12px;height:12px;background:var(--orange);clip-path:polygon(25% 0,75% 0,75% 25%,100% 25%,100% 75%,75% 75%,75% 100%,25% 100%,25% 75%,0 75%,0 25%,25% 25%)}
.finder .row{display:grid;grid-template-columns:52px minmax(0,1fr);gap:10px;align-items:start;margin-top:12px}
.hero h1,.card h3,.topic h1{word-break:auto-phrase}
@media (max-width:520px){.finder .row{grid-template-columns:1fr;gap:6px}.finder .lbl{padding-top:0}}
.finder .lbl{font-size:12px;color:var(--faint);padding-top:6px;letter-spacing:.06em}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:999px;padding:4px 11px;font:inherit;font-size:13px;cursor:pointer;transition:background .15s,border-color .15s}
.chip:hover{border-color:var(--faint)}
.chip .n{font-family:var(--f-mono);font-size:11px;color:var(--faint)}
.chip .dot{width:9px;height:9px;border-radius:2px;background:var(--c)}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.chip[aria-pressed="true"] .n{color:inherit;opacity:.7}
.chip:disabled{opacity:.4;cursor:default}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.seg button{border:0;background:var(--surface);color:var(--muted);font:inherit;font-size:13px;padding:4px 12px;cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--orange);color:#fff}
.search{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.search input{flex:1;min-width:0;border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:8px;padding:7px 10px;font:inherit;font-size:14px}
.finder-foot{display:flex;justify-content:space-between;align-items:center;margin-top:12px;padding-top:10px;border-top:1px dashed var(--line);font-size:13px;color:var(--muted);gap:8px;flex-wrap:wrap}
.linkbtn{background:none;border:0;color:var(--blue);font:inherit;font-size:13px;cursor:pointer;padding:0}

/* stream */
.stream-head{display:flex;justify-content:space-between;align-items:baseline;margin:26px 0 12px;gap:8px;flex-wrap:wrap}
.stream-head .sort{font-size:12px;color:var(--faint)}
.cards{display:grid;gap:14px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px;display:grid;gap:8px;cursor:pointer;transition:border-color .15s}
.card:hover{border-color:var(--faint)}
.card.top{border-color:var(--orange);border-width:2px}
.meta{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;font-size:12px;color:var(--muted)}
.tag-d{display:inline-flex;align-items:center;gap:5px;font-weight:700;color:var(--c)}
.tag-d::before{content:"";width:9px;height:9px;border-radius:2px;background:var(--c)}
.tag-t{border:1px solid var(--line);border-radius:4px;padding:0 6px}
.tag-r{font-family:var(--f-mono);font-size:11px;letter-spacing:.04em}
.sample-pill{font-family:var(--f-mono);font-size:10px;color:var(--blue);border:1px solid var(--blue);border-radius:3px;padding:0 4px}
.date{margin-left:auto;font-family:var(--f-mono);font-size:11px;color:var(--faint)}
.card h3{margin:0;font-size:17px;line-height:1.5;text-wrap:balance}
.card p{margin:0;color:var(--muted);font-size:14px}
.extra{display:flex;flex-wrap:wrap;gap:8px 16px;font-size:12.5px;color:var(--muted)}
.extra b{font-family:var(--f-mono);color:var(--ink);font-weight:600}
.links{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:13px;align-items:center}
.links .off{font-weight:700;color:var(--orange-ink);text-decoration:none}
.links .off::before{content:"公式 ";font-size:11px;background:var(--orange-soft);color:var(--orange-ink);padding:1px 5px;border-radius:3px;margin-right:4px}
.links .news{color:var(--muted);text-decoration:none}
.links .news:hover,.links .off:hover{text-decoration:underline}
.empty{padding:28px;text-align:center;color:var(--muted);background:var(--surface);border:1px dashed var(--line);border-radius:12px}

/* rail */
.rail{display:grid;gap:22px;align-content:start}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px}
.panel h2{margin-bottom:10px}
.rank{list-style:none;margin:0;padding:0;display:grid;gap:12px;counter-reset:r}
.rank li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:8px;counter-increment:r}
.rank li::before{content:counter(r);font-family:var(--f-display);color:var(--orange);font-size:16px;line-height:1.5}
.rank a{font-size:13.5px;font-weight:700;text-decoration:none;line-height:1.45;display:block}
.rank a:hover{text-decoration:underline}
.rank small{display:block;font-size:12px;color:var(--muted)}
.rank .sig{font-family:var(--f-mono);font-size:11px;color:var(--faint)}
.ev{display:grid;gap:10px}
.ev a{display:grid;grid-template-columns:58px minmax(0,1fr);gap:10px;text-decoration:none;align-items:start}
.cal{border:1px solid var(--line);border-radius:8px;text-align:center;overflow:hidden;font-family:var(--f-mono)}
.cal b{display:block;background:var(--orange);color:#fff;font-size:10px;letter-spacing:.08em;padding:1px 0}
.cal span{display:block;font-size:15px;font-weight:600;padding:3px 0;font-variant-numeric:tabular-nums}
.ev strong{font-size:13.5px;display:block;line-height:1.45}
.ev small{font-size:12px;color:var(--muted)}
.arch{display:grid;gap:6px;font-size:13.5px}
.arch a{display:flex;justify-content:space-between;gap:8px;text-decoration:none;padding:6px 0;border-bottom:1px solid var(--line)}
.arch a:last-child{border-bottom:0}
.arch span{font-family:var(--f-mono);font-size:11px;color:var(--faint)}
.op{display:grid;gap:10px;justify-items:start}
.op .logos{background:#fff;border-radius:8px;padding:10px 12px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.op .logos img{height:26px;width:auto}
.op .logos img.tl{height:44px}
.op p{margin:0;font-size:13px;color:var(--muted)}

/* domain tiles */
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:28px}
@media (max-width:640px){.tiles{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.tile{padding:10px 8px}.tile b{font-size:12.5px}.tile span{display:none}}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:12px;text-align:left;font:inherit;color:var(--ink);cursor:pointer;display:grid;gap:4px;border-top:4px solid var(--c)}
.tile b{font-size:14px}
.tile span{font-size:12px;color:var(--muted)}

/* topic page (modal) */
dialog{border:0;padding:0;border-radius:14px;max-width:min(680px,calc(100vw - 32px));width:100%;background:var(--surface);color:var(--ink);box-shadow:0 20px 60px rgba(0,0,0,.35)}
dialog::backdrop{background:rgba(10,12,16,.55)}
.dlg{padding:20px;display:grid;gap:12px}
.dlg-top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.dlg-top .url{font-family:var(--f-mono);font-size:11px;color:var(--faint);overflow-wrap:anywhere}
.close{background:var(--surface-2);border:0;border-radius:8px;color:var(--ink);font:inherit;padding:4px 10px;cursor:pointer}
.dlg h3{margin:0;font-size:21px;line-height:1.45;text-wrap:balance}
.blogcard{display:grid;grid-template-columns:150px minmax(0,1fr);border:1px solid var(--line);border-radius:10px;overflow:hidden;text-decoration:none}
.blogcard .ogp{background:repeating-linear-gradient(135deg,var(--surface-2) 0 10px,var(--bg) 10px 20px);display:grid;place-items:center;font-size:11px;color:var(--faint);text-align:center;padding:8px;min-height:96px}
.blogcard .bc{padding:10px 12px;display:grid;gap:2px;align-content:center}
.blogcard .bc b{font-size:14px;line-height:1.45}
.blogcard .bc small{font-size:12px;color:var(--muted)}
@media (max-width:520px){.blogcard{grid-template-columns:1fr}.blogcard .ogp{min-height:80px}}
.note{font-size:12px;color:var(--faint);margin:0}
.share{display:flex;gap:8px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:6px;border-radius:8px;padding:7px 14px;font:inherit;font-size:13.5px;font-weight:700;text-decoration:none;border:1px solid var(--line);color:var(--ink);background:var(--surface);cursor:pointer}
.btn.x{background:var(--ink);color:var(--bg);border-color:var(--ink)}

footer{border-top:1px solid var(--line);background:var(--surface)}
footer .wrap{padding-block:22px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12.5px;color:var(--muted)}
footer .wm{height:22px;width:auto}
.wm-dark{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .wm-light{display:none}:root:not([data-theme="light"]) .wm-dark{display:inline}}
:root[data-theme="dark"] .wm-light{display:none}:root[data-theme="dark"] .wm-dark{display:inline}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---- site additions ---- */
.card p.sum{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.card a.title{text-decoration:none}
.card a.title:hover h3{text-decoration:underline}
.page{padding-block:24px 48px;max-width:820px}
.page h1{font-family:var(--f-display);font-weight:400;font-size:clamp(22px,3.6vw,32px);line-height:1.35;margin:8px 0 14px;text-wrap:balance}
.page h2{font-size:18px;margin:28px 0 8px}
.prose p{margin:0 0 1em}
.prose{max-width:68ch}
.topic .summary{font-size:16px;line-height:1.9;margin:4px 0 18px}
.topic .blogcard img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:1.91/1}
.topic .blogcard{margin:6px 0 6px;color:inherit}
.topic .blogcard .ogp{padding:0}
.topic .blogcard .ogp span{padding:8px}
.crumbs{font-size:12.5px;color:var(--faint);display:flex;gap:6px;flex-wrap:wrap}
.crumbs a{color:var(--muted);text-decoration:none}
.sec-note{color:var(--muted);margin:-4px 0 12px;font-size:14px}
.weekly-lead{font-size:15.5px;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin:0 0 8px}
.pager{display:flex;gap:10px;justify-content:center;margin-top:20px;font-size:14px}
.term-list{display:flex;flex-wrap:wrap;gap:8px}
.seg-period{margin-left:8px}
#search-ui{margin-top:12px}
.no-js-note{font-size:12px;color:var(--faint)}
.tile{text-decoration:none}
.meta a{text-decoration:none}.meta a:hover{text-decoration:underline}
.lead-weekly{font-size:13.5px;margin:-8px 0 16px !important}.lead-weekly a{color:var(--orange-ink)}