@import url("/kozgoproextralight/stylesheet.css");
@import url("/Interstate_Light/stylesheet.css");
/* T2: 設計相談 split into pages; same geometry as T1 without JS (T1 "enhanced" rules are the default here). */
.text-layout{display:grid;grid-template-columns:180px minmax(0,1fr);gap:32px;align-items:start}
.text-meta{width:180px;max-width:180px;min-width:0}
.text-toc{margin-top:16px}
.text-toc .drawing-button{margin:5px 0 0}
.text-stage{min-width:0}
.text-copy{max-width:36em;font-size:13px;line-height:1.9}
.text-panel+.text-panel{margin-top:3.8em}
.text-copy h2{font-size:15px;font-weight:400;line-height:1.9;margin:0 0 1.9em;scroll-margin-top:24px}
.text-copy h3{font-size:13px;font-weight:400;margin:2.85em 0 1.9em}
.text-copy img{display:block;width:auto;max-width:100%;height:auto}
.text-copy address{font-style:normal}
.text-copy address br{display:initial}
.text-copy address p{text-indent:0}
.text-page .to-top-fab{opacity:1;visibility:visible;pointer-events:auto;transition:none}
.text-layout{gap:0 32px}
.text-copy{max-width:none}
.text-panel{margin-top:0}
.text-viewport{display:flow-root}
@media(min-width:1030px){
 /* Reserve the same Flickr row as the Ashiya reference, preserving its box calculation. */
 .text-page{--flickr-total:64px}
 .text-layout{grid-template-columns:minmax(0,1fr) var(--w) minmax(0,1fr)}
 .text-stage{min-height:var(--h)}
}
@media(max-width:1029px){
 .text-layout{display:block;max-width:1000px;margin-inline:auto}
 .text-meta{width:100%;max-width:none;display:block;margin-bottom:16px}
 .text-toc{display:flex;flex-wrap:wrap;gap:4px 24px;margin-top:12px}
 .text-toc .drawing-button{margin:0;padding:0}
 .text-copy{max-width:none;width:100%;font-size:13px}
 .text-viewport{width:100%;min-height:calc(min(92vw,1000px) * 2 / 3)}
}
@media(max-width:600px){.text-meta .project-title{font-size:18px}.text-viewport{min-height:calc((100vw - 48px) * 2 / 3)}}

/* fix2: aligned section controls, compact addresses, semantic grouped lists. */
.text-page .text-toc .drawing-button{padding-left:0}
.text-copy address{margin:0;line-height:1.9;text-indent:0}
.text-copy .text-link-list{margin:0;padding-left:1.3em;list-style:disc}
.text-copy .text-link-list li{margin:0;padding:0;line-height:1.65;text-indent:0}
.text-panel[data-section="essays"] h3,.text-panel[data-section="links"] h3{margin:2.85em 0 .65em}
.text-copy .link-location{font:inherit}
.text-copy .text-link-list+p{margin-top:2.85em}

/* T2: <main> now holds only the right-hand text, so the frame carries the page margins that style.css gives to main. */
.text-frame{margin:80px 4vw 0}
.text-layout main{margin:0}
@media(max-width:1029px){.text-frame{margin-top:30px}}
@media(max-width:600px){.text-frame{margin-left:24px;margin-right:24px}}
/* current section: underline (style.css underlines aria-current=true) */
.drawing-button[aria-current=page]{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
/* mail line (dl) and plain stage list */
.text-copy dl.contact-list{display:flex;gap:0 .5em;margin:0}
.text-copy dl.contact-list dt::after{content:"："}
.text-copy dl.contact-list dd{margin:0}
.text-copy .plain-list{margin:0 0 1em;padding:0;list-style:none}
.text-copy .plain-list li{margin:0}
.text-copy h2+address,.text-copy h2+.text-link-list{margin-top:0}

/* fix1: 設計の流れ (process page only) */
.page-process .text-copy h3{font-weight:700;color:#000;margin:2.85em 0 .65em}
.page-process .text-copy h3::before{content:"・"}
.page-process .text-copy p+p{margin-top:0}
.page-process .text-copy .plain-list{padding-left:3em;margin:0}
.page-process .text-copy dl.contact-list{padding-left:1em}

/* fix1: footer ends the page, as on the work list (list.css): fixed 70px, no stretching; extra viewport height stays blank below. */
@media(min-width:1030px){.site-header{height:110px}.site-footer{height:70px}
 /* fix2: as on the work list (list.css --outside-h:276px = header 110 + top gap 80 + footer gap 16 + footer 70), a short page fills the viewport so the footer sits at the bottom edge and nothing is left below it. */
 .text-stage{min-height:max(var(--h),calc(100dvh - 276px))}}

/* fix3: LINK / 連絡先 — the h2 is kept for assistive tech but hidden visually; the box then starts level with the h1. */
.page-links .text-copy h2,.page-contact .text-copy h2{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0}
.page-links .text-copy h3{font-weight:700;color:#000;margin:2.85em 0 0}
.page-links .text-copy h3::before{content:"・"}
.page-links .text-copy h3:first-of-type{margin-top:0}
.page-links .text-copy .text-link-list{list-style:none;padding-left:1em;margin:0}

/* fix3b: the ↑ button appears only when totop.js says so (page scrollable and scrolled ≥120px); hidden without JS. Pages without data-totop (en/contact.html) keep the T1 behaviour. */
.text-page[data-totop] .to-top-fab{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s ease,visibility 0s linear .2s}
.text-page[data-totop] .to-top-fab.is-visible{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .2s ease,visibility 0s}
@media(prefers-reduced-motion:reduce){.text-page[data-totop] .to-top-fab,.text-page[data-totop] .to-top-fab.is-visible{transition:none}}

/* P1 (About): generic version of the T2 LINK page style. h2 is kept for assistive tech and hidden visually; the box starts level with the h1. */
.p1 .text-copy h2{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0}
.p1 .text-copy h3{font-weight:700;color:#000;margin:2.85em 0 0}
.p1 .text-copy h3::before{content:"・"}
.p1 .text-copy h3:first-of-type{margin-top:0}
.p1 .text-copy .text-link-list{list-style:none;padding-left:1em;margin:0}
.p1 .portrait{float:right;width:150px;margin:0 0 1em 1em}
.p1 .portrait img{display:block;width:100%;height:auto}
.p1 .text-copy::after{content:"";display:block;clear:both}
.p1 .text-copy>p{text-indent:0}

/* P1 fix1 */
/* 経歴 / Biography: no blank lines between the years */
.page-career .text-copy h3{margin-top:0}
/* 連絡先 / Contact: address in three groups, one blank line between groups; tight lines inside a group */
.p1 .text-copy address{line-height:1.65}
.p1 .text-copy address .grp{display:block}
.p1 .text-copy address .grp+.grp{margin-top:1.9em}
.p1 .text-copy address+p{margin-top:1.9em}
/* English contact: inquiry text and photo come first, in the original order */
.p1 .text-copy .inq{margin:0}
.p1 .text-copy .inq+.inq{margin-top:1.9em}
.p1 .text-copy .photo{margin:1.9em 0}
.p1 .text-copy .photo+address{margin-top:0}
/* 掲載誌: year column in front of each item */
.p1 .text-copy .year{display:inline-block;min-width:3em}

.p1 .text-copy .isbn{white-space:nowrap}

.p1 .text-copy .ln{display:block}
.p1 .text-copy li:has(>.ln){margin-top:.6em}
.p1 .text-copy li:has(>.ln):first-child{margin-top:0}
.p1 .text-copy li:has(>.ln)+li{margin-top:.6em}

/* Biography: keep the portrait from narrowing the text on phones. */
@media(max-width:600px){
 .p1.page-career .portrait{float:none;max-width:100%;margin:0 0 1.9em}
}

/* English Contact: compact separation between address groups. */
html[lang=en] .p1.page-contact .text-copy address .grp+.grp{margin-top:.8em}

/* unify: one look for all prof/cont text pages, Japanese and English (same values in prof/text.css and cont/text.css).
   Body: 12px, weight 400, #666, kozgoproextralight (English: Interstate Light first). Bold items (h2, h3, b, strong, th): 700, #000. Links #666. Boxes are not touched. */
.text-page{--old-text:#666;--old-font:"kozgoproextralight","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif}
html[lang=en] .text-page{--old-font:"Interstate Light","kozgoproextralight","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif}
.text-page .text-copy{font-family:var(--old-font);font-size:12px;font-weight:400;color:var(--old-text)}
.text-page .text-copy :is(address,dt,dd,li,p){font-family:inherit;font-size:12px;font-weight:400;color:var(--old-text)}
.text-page .text-copy :is(h2,h3,b,strong,th){font-family:inherit;font-size:12px;font-weight:700;color:#000}
.text-page .text-copy a{color:#666}
/* edit2: Japanese Biography years look like body text; the office name on the contact page is bold black. */
.text-page .text-copy h3.yr-plain{font-weight:400;color:#666}
.text-page .text-copy address .office{font-weight:700;color:#000}