@charset "utf-8";
/* Shared archive theme. Only pages explicitly opting in use these rules. */
:root { --paper:#faf5eb; --ink:#252923; --muted:#6b7066; --line:#e1d8c9; --accent:#b54b2e; --white:#fffdf7; }
html:has(body.portfolio) { margin:0; background:var(--paper); scroll-behavior:smooth; }
body.portfolio { margin:0; padding:0; background:var(--paper); color:var(--ink); font:16px/1.85 "Segoe UI","Yu Gothic","Hiragino Kaku Gothic ProN",Meiryo,sans-serif; overflow-wrap:anywhere; }
.portfolio *, .portfolio *::before, .portfolio *::after { box-sizing:border-box; }
.portfolio a { color:inherit; text-underline-offset:5px; }
.portfolio a:focus-visible, .portfolio summary:focus-visible { outline:3px solid var(--accent); outline-offset:5px; }
.portfolio .site-header { max-width:1320px; margin:auto; padding:25px 5%; display:flex; align-items:center; justify-content:space-between; gap:24px; border-bottom:1px solid var(--line); }
.portfolio .brand { display:flex; gap:12px; align-items:center; text-decoration:none; font-weight:700; letter-spacing:-.04em; font-size:22px; }
.portfolio .brand-mark { display:grid; place-items:center; width:34px; height:34px; background:var(--ink); color:var(--paper); font-size:20px; border-radius:50%; }
.portfolio .site-nav { display:flex; gap:25px; font-size:13px; }
.portfolio .site-nav a { text-decoration:none; }
.portfolio .site-nav a[href$="zemi/index.html"] { font-size:15px; font-weight:600; }
.portfolio .site-nav a:hover { color:var(--accent); }
.portfolio .skip-link { position:absolute; top:-100px; left:20px; padding:10px 20px; background:var(--white); z-index:10; }
.portfolio .skip-link:focus { top:10px; }
.portfolio .archive-shell { max-width:1320px; padding:0 5%; margin:auto; }
.portfolio .eyebrow { margin:0 0 20px; font:600 11px/1.5 "Segoe UI",sans-serif; letter-spacing:.18em; text-transform:uppercase; color:var(--accent); }
.portfolio .archive-hero { display:grid; grid-template-columns:1.4fr 1fr; gap:60px; padding:76px 0 70px; align-items:end; }
.portfolio .archive-title { margin:0; font-size:clamp(48px,7vw,94px); line-height:1.05; letter-spacing:-.065em; font-weight:500; }
.portfolio .archive-title em { font-family:Georgia,serif; font-weight:400; color:var(--accent); }
.portfolio .hero-note { max-width:360px; margin:0 0 8px; font-size:15px; color:var(--muted); }
.portfolio .hero-note strong { display:block; margin-bottom:14px; color:var(--ink); font-size:19px; font-weight:500; }
.portfolio .section-heading { display:flex; justify-content:space-between; align-items:baseline; gap:20px; border-top:1px solid var(--ink); padding:20px 0; margin:0; }
.portfolio .section-heading h2 { font-size:19px; font-weight:500; margin:0; }
.portfolio .section-heading span { color:var(--muted); font-size:11px; letter-spacing:.1em; }
.portfolio .work-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:40px 28px; margin:0 0 70px; }
.portfolio .work-card { display:block; text-decoration:none; min-width:0; }
.portfolio .work-cover { aspect-ratio:16/10; background:#e6e6dc; position:relative; overflow:hidden; margin:0; border-radius:3px; }
.portfolio .work-cover img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s ease; }
.portfolio .work-card:hover .work-cover img { transform:scale(1.035); }
.portfolio .work-number { position:absolute; left:18px; top:18px; border-radius:50%; background:var(--paper); width:37px; height:37px; display:grid; place-items:center; font-size:12px; }
.portfolio .work-meta { display:flex; justify-content:space-between; gap:16px; margin:18px 0 6px; color:var(--muted); font-size:11px; letter-spacing:.1em; text-transform:uppercase; }
.portfolio .work-card h3 { font-size:clamp(20px,2.3vw,28px); font-weight:500; line-height:1.5; margin:0; letter-spacing:-.025em; }
.portfolio .work-card h3 span { float:right; color:var(--accent); }
.portfolio .work-card p { margin:9px 0 0; color:var(--muted); font-size:14px; }
.portfolio .seminar-link { display:flex; justify-content:space-between; align-items:center; padding:36px 30px; background:#f1e7d6; border-top:2px solid var(--accent); border-bottom:1px solid var(--line); text-decoration:none; gap:20px; }
.portfolio .seminar-link small { color:var(--accent); font-size:10px; letter-spacing:.13em; }
.portfolio .seminar-link h2 { margin:8px 0; font-size:clamp(28px,3vw,38px); font-weight:500; letter-spacing:-.035em; }
.portfolio .seminar-link > span { color:var(--accent); font-size:32px; transition:transform .2s; }
.portfolio .seminar-link:hover > span { transform:translate(3px,-3px); }
.portfolio .seminar-link p { margin:0; color:var(--muted); font-size:13px; }
.portfolio .archive-shell > .seminar-link:first-child { margin-top:30px; }
.home-page .archive-shell { container-type:inline-size; }
.portfolio .seminar-feature { display:grid; grid-template-rows:auto minmax(340px,1fr) auto; min-height:calc(62.5cqw + 300px); margin:36px 0 0; border-top:2px solid var(--accent); border-bottom:1px solid var(--ink); }
.portfolio .seminar-feature-heading { display:grid; grid-template-columns:1.3fr 1fr; gap:40px; align-items:end; padding:38px 0; }
.portfolio .seminar-feature h1 { margin:0; font-size:clamp(48px,7vw,86px); font-weight:500; line-height:1.3; letter-spacing:-.055em; }
.portfolio .seminar-feature h1 span { display:block; color:var(--accent); }
.portfolio .seminar-feature-intro { max-width:350px; justify-self:end; width:100%; }
.portfolio .seminar-feature-intro > p { font-size:clamp(18px,2.3vw,26px); margin:0 0 24px; line-height:1.6; }
.portfolio .feature-button { display:flex; justify-content:space-between; align-items:center; gap:30px; padding:15px 20px; color:var(--paper); background:var(--ink); text-decoration:none; font-size:14px; }
.portfolio .feature-button:hover { background:var(--accent); }
.portfolio .seminar-feature-photo { display:block; position:relative; min-height:0; overflow:hidden; background:var(--ink); }
.portfolio .seminar-feature-photo img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 46%; transition:transform .4s; }
.portfolio .seminar-feature-photo:hover img { transform:scale(1.025); }
.portfolio .seminar-feature { min-height:0; grid-template-rows:auto auto auto; }
.portfolio .seminar-feature-middle { display:grid; grid-template-columns:1.15fr 1fr; gap:40px; align-items:center; padding:12px 0 36px; }
.portfolio .seminar-art { padding:12px 0; font-size:clamp(40px,5.8vw,72px); line-height:1.07; letter-spacing:-.06em; }
.portfolio .seminar-art > span, .portfolio .seminar-art > em { display:block; }
.portfolio .seminar-art > em { color:var(--accent); font-family:Georgia,serif; font-weight:400; }
.portfolio .seminar-art p { font-size:14px; line-height:1.9; letter-spacing:0; color:var(--muted); margin:22px 0 0; }
.portfolio .seminar-feature-middle .seminar-feature-photo { width:100%; height:320px; }
.portfolio .seminar-feature-middle .feature-photo-label { padding:12px; font-size:10px; letter-spacing:.03em; }
.portfolio .feature-photo-label { position:absolute; bottom:0; left:0; right:0; display:flex; justify-content:space-between; gap:20px; padding:18px 24px; background:rgba(25,27,24,.86); color:#fffdf7; font-size:11px; letter-spacing:.1em; }
.portfolio .seminar-feature-bottom { display:grid; grid-template-columns:1fr 1fr; gap:40px; padding:30px 0 36px; }
.portfolio .seminar-feature-bottom .eyebrow { margin-bottom:12px; }
.portfolio .feature-research-note > p:not(.eyebrow) { font-size:23px; margin:0 0 12px; line-height:1.6; }
.portfolio .feature-research-note > span { font-size:12px; color:var(--muted); }
.portfolio .feature-latest { text-decoration:none; padding-left:30px; border-left:1px solid var(--line); }
.portfolio .feature-latest h2 { font-size:24px; line-height:1.5; font-weight:500; margin:0 0 12px; }
.portfolio .feature-latest h2 span { color:var(--accent); }
.portfolio .feature-latest > p:last-child { font-size:13px; color:var(--muted); margin:0; }
.portfolio .feature-latest:hover h2 { color:var(--accent); }
.portfolio .course-intro { padding:60px 0 38px; }
.portfolio .course-intro .archive-title { font-size:42px; }
.portfolio .course-intro .archive-title br { display:none; }
.portfolio .course-intro .hero-note { font-size:13px; }
.portfolio .course-intro .hero-note strong { font-size:16px; }
@media(max-width:700px) {
 .portfolio .seminar-feature { min-height:0; grid-template-rows:auto auto auto; margin-top:24px; }
 .portfolio .seminar-feature-middle { grid-template-columns:1fr; gap:24px; }
 .portfolio .seminar-art { font-size:54px; }
 .portfolio .seminar-feature-middle .seminar-feature-photo { height:230px; }
 .portfolio .seminar-feature-heading { grid-template-columns:1fr; gap:25px; padding:28px 0; }
 .portfolio .seminar-feature h1 { font-size:52px; }
 .portfolio .seminar-feature h1 span { display:block; }
 .portfolio .seminar-feature-intro { max-width:none; }
 .portfolio .seminar-feature-intro > p { font-size:19px; }
 .portfolio .seminar-feature-bottom { grid-template-columns:1fr; gap:24px; }
 .portfolio .feature-latest { padding:24px 0 0; border-left:0; border-top:1px solid var(--line); }
 .portfolio .feature-photo-label { padding:14px 12px; font-size:10px; }
 .portfolio .course-intro .archive-title { font-size:32px; }
}
.portfolio .site-footer { max-width:1320px; margin:60px auto 0; padding:24px 5%; display:flex; justify-content:space-between; gap:20px; font-size:11px; letter-spacing:.06em; color:var(--muted); border-top:1px solid var(--line); }
.portfolio .breadcrumb { font-size:12px; color:var(--muted); margin:28px 0 0; }
.portfolio .course-hero { padding:50px 0; max-width:800px; }
.portfolio .course-hero h1 { margin:0 0 18px; font-size:clamp(30px,4.5vw,56px); line-height:1.35; font-weight:500; letter-spacing:-.04em; }
.portfolio .course-hero p:last-child { color:var(--muted); margin:0; }
.portfolio .entry-list { list-style:none; padding:0; margin:0 0 55px; }
.portfolio .entry-list li { margin:0; border-bottom:1px solid var(--line); }
.portfolio .entry-list a { display:grid; grid-template-columns:46px 1fr 50px 20px; align-items:center; gap:16px; padding:24px 12px; text-decoration:none; transition:background .2s; }
.portfolio .entry-list a:hover { background:#f3eadb; }
.portfolio .entry-list .entry-number { color:var(--muted); font-size:12px; }
.portfolio .entry-list .entry-format { color:var(--muted); font-size:10px; letter-spacing:.08em; }
.portfolio .entry-arrow { color:var(--accent); }
/* The article scope overrides legacy indentation without changing embedded apps. */
.portfolio .article-wrap { max-width:1040px; padding:0 5%; margin:0 auto; }
.portfolio .article-content { margin:35px 0 0; padding:35px 0; border-top:1px solid var(--line); line-height:1.95; }
.portfolio .article-content :where(div,section,p,h1,h2,h3,h4,h5,ol,ul,pre,blockquote) { margin-left:0; text-indent:0; max-width:100%; }
.portfolio .article-content div { margin-top:1.5em; }
.portfolio .article-content h1 { font:500 clamp(27px,4vw,44px)/1.45 "Segoe UI","Yu Gothic",sans-serif; color:var(--ink); margin:0 0 35px; letter-spacing:-.035em; }
.portfolio .article-content h2 { font-size:24px; line-height:1.5; color:var(--ink); margin:42px 0 20px; padding-bottom:12px; border-bottom:1px solid var(--line); }
.portfolio .article-content h3 { font-size:19px; color:var(--ink); margin:26px 0 12px; }
.portfolio .article-content h4 { font-size:16px; font-weight:400; color:var(--ink); line-height:1.95; margin:16px 0; }
.portfolio .article-content p { margin:16px 0; line-height:1.95; }
.portfolio .article-content a { color:#8e3c24; }
.portfolio .article-content img { max-width:100%; height:auto; object-fit:contain; border-radius:4px; vertical-align:middle; }
.portfolio .article-content iframe, .portfolio .article-content video { max-width:100%; }
.portfolio .article-content iframe[src*="youtube"] { aspect-ratio:16/9; height:auto; }
.portfolio .article-content .video-container { position:relative; aspect-ratio:16/9; margin:24px 0; }
.portfolio .article-content .video-container iframe { position:absolute; inset:0; width:100%; height:100%; }
.portfolio .article-content pre { white-space:pre-wrap; overflow-wrap:anywhere; padding:24px; background:#f1eadf; border:1px solid var(--line); border-radius:4px; }
.portfolio .article-content xmp { white-space:pre-wrap; overflow-wrap:anywhere; font:13px/1.7 Consolas,monospace; padding:20px; background:#f1eadf; }
.portfolio .article-content code { font:13px/1.7 Consolas,monospace; overflow-wrap:anywhere; }
.portfolio .article-content > code, .portfolio .article-content div > code { display:block; white-space:pre-wrap; background:#f1eadf; padding:20px; overflow:auto; }
.portfolio .article-content blockquote { padding:12px 24px; background:#f1eadf; border-left:3px solid var(--accent); }
.portfolio .article-content table { display:block; max-width:100%; overflow:auto; border-collapse:collapse; }
.portfolio .article-content td, .portfolio .article-content th { padding:12px; border:1px solid var(--line); }
.portfolio .article-content hr { border:0; border-top:1px solid var(--line); margin:32px 0; }
.portfolio .article-content logotohome { display:none; }
.portfolio .article-content br + br { display:none; }
.portfolio .article-bottom { display:flex; justify-content:space-between; gap:20px; padding:25px 0; border-top:1px solid var(--line); font-size:13px; }
.portfolio .article-content .article-kicker { margin:0 0 14px; font-size:11px; letter-spacing:.14em; color:var(--accent); }
.portfolio .article-content .article-toc { margin:0 0 36px; padding:18px 22px; background:var(--white); border:1px solid var(--line); border-radius:6px; }
.portfolio .article-toc summary { cursor:pointer; font-size:14px; font-weight:600; }
.portfolio .article-toc ol { padding-left:22px; margin:16px 0 0; columns:2; column-gap:30px; }
.portfolio .article-toc li { break-inside:avoid; font-size:13px; margin:8px 0; }
.portfolio .article-content :is(h2,h3) { scroll-margin-top:24px; }
.portfolio .article-content .article-prose { font-size:16px; font-weight:400; line-height:1.95; margin:18px 0; }
.portfolio .article-content .media-gallery { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin:26px 0 32px; }
.portfolio .article-content .media-gallery.single { grid-template-columns:minmax(0,1fr); }
.portfolio .article-content .media-gallery a { display:flex; align-items:center; justify-content:center; padding:14px; min-width:0; background:var(--white); border:1px solid var(--line); border-radius:6px; }
.portfolio .article-content .media-gallery img { display:block; width:auto; height:auto; max-width:100%; max-height:480px; margin:0; }
.portfolio .article-content .media-gallery a:hover { border-color:var(--accent); }
.portfolio .article-content pre, .portfolio .article-content > code, .portfolio .article-content div > code { white-space:pre; overflow:auto; overflow-wrap:normal; tab-size:4; max-height:640px; }
.portfolio .article-content pre code { white-space:pre; overflow-wrap:normal; }
.portfolio .article-content li { margin:8px 0; }
.portfolio .article-content > div { margin-top:28px; }
@media(max-width:640px) {
 .portfolio .article-content .media-gallery { gap:10px; }
 .portfolio .article-content .media-gallery a { padding:8px; }
 .portfolio .article-content .media-gallery img { max-height:360px; }
 .portfolio .article-toc ol { columns:1; }
 .portfolio .seminar-link { padding:25px 20px; }
 .portfolio .article-content pre { padding:16px; }
}
@media(max-width:640px) {
 .portfolio .site-header { padding:20px 6%; gap:16px; }
 .portfolio .brand { font-size:19px; }
 .portfolio .site-nav { gap:14px; font-size:11px; }
 .portfolio .archive-shell, .portfolio .article-wrap { padding:0 6%; }
 .portfolio .archive-hero { grid-template-columns:1fr; gap:30px; padding:48px 0; }
 .portfolio .archive-title { font-size:64px; }
 .portfolio .hero-note { max-width:none; }
 .portfolio .section-heading { align-items:flex-start; flex-direction:column; gap:6px; }
 .portfolio .work-grid { grid-template-columns:1fr; gap:32px; margin-bottom:45px; }
 .portfolio .course-hero { padding:36px 0; }
 .portfolio .entry-list a { grid-template-columns:24px 1fr 30px 12px; gap:10px; padding:20px 0; font-size:14px; }
 .portfolio .article-content img[width] { width:auto; max-width:100%; max-height:75vh; }
 .portfolio .site-footer { margin-top:40px; flex-wrap:wrap; padding:20px 6%; }
}
@media(prefers-reduced-motion:reduce) { html:has(body.portfolio) { scroll-behavior:auto; } .portfolio * { transition:none!important; } }