/* Architect pages (site/architects/<slug>/), made by tools/architect_pages.py. Shares pages.css; v24 option B.
   Desktop: two panes that scroll on their own, write-up left (a third of the screen), buildings right in two columns.
   Phone: one column, write-up first. */
.arch { display: block; }
.rail { padding: 8px clamp(16px, 3vw, 32px) 24px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.wallpane { padding: 16px clamp(16px, 3vw, 32px) 0; min-width: 0; }

.portrait { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.portrait img { width: 100%; max-height: 520px; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%; filter: grayscale(1) contrast(1.05); background: #DCDBD5; }
.portrait figcaption { font: 400 11px/1.5 var(--sans); color: var(--graphite); }
.rail .kicker { margin: 0; font: 500 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--graphite); }
.rail h1 { margin: -4px 0 0; font-family: var(--display); font-weight: 900; font-size: clamp(48px, 5vw, 64px); line-height: .9; letter-spacing: .005em; text-transform: uppercase; text-wrap: balance; }
.rail .facts { margin: 0; font: 500 15px/1.5 var(--sans); color: var(--graphite); display: block; border: 0; }
.bio { display: flex; flex-direction: column; gap: 6px; }
.bio p { margin: 0 0 12px; font: 400 17px/1.55 var(--sans); }
.bio .more p:last-child { margin-bottom: 0; }
.more summary { list-style: none; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; padding: 8px 0; font: 700 15px var(--sans); border-bottom: 1px solid var(--ink); }
.more summary::-webkit-details-marker { display: none; }
.more summary::after { content: ''; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); }
.more[open] summary { margin-bottom: 12px; }
.more[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.more summary .l, .more[open] summary .m { display: none; }
.more[open] summary .l { display: inline; }
@media (hover: hover) { .more summary:hover { color: var(--red); border-color: var(--red); } }
.rail .cta { display: block; text-align: center; align-self: stretch; }

.blk { padding-top: 10px; }
.blk h2 { margin: 0 0 6px; padding-top: 12px; border-top: 1px solid var(--ink); font: 500 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.rows a { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--hair); text-decoration: none; font: 600 15px var(--sans); }
.rows .lt { flex: 1; min-width: 0; }
.rows .lt span { font-weight: 400; color: var(--graphite); }
.rows .go { font: 500 13px var(--mono); color: var(--graphite); }
.rows svg { flex: 0 0 22px; fill: none; stroke: var(--ink); stroke-width: 1.6; }
.rows img { flex: 0 0 22px; width: 22px; height: 22px; object-fit: contain; }
.rows .mono { flex: 0 0 22px; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; border: 1px solid #8F8D86; border-radius: 5px; font: 700 12px var(--sans); color: var(--graphite); }
@media (hover: hover) { .rows a:hover { color: var(--red); } .rows a:hover svg { stroke: var(--red); } }

.books { display: flex; gap: 12px; overflow-x: auto; padding: 6px 0 4px; scrollbar-width: none; }
.books::-webkit-scrollbar { display: none; }
.bk { flex: 0 0 auto; width: 138px; display: flex; flex-direction: column; gap: 6px; text-decoration: none; }
.bk .cv { display: block; width: 78px; height: 117px; background: #EDEBE6; overflow: hidden; }
.bk .cv img { width: 100%; height: 100%; object-fit: cover; }
.bk .standin { display: flex; align-items: flex-start; height: 100%; padding: 8px; box-sizing: border-box; font: 800 11px/1.05 var(--display); text-transform: uppercase; }
.bk .bt { font: 600 13px/1.25 var(--sans); }
.bk small { display: block; font: 400 12px var(--sans); color: var(--graphite); }
.sim { margin: 0; font: 500 15px/1.9 var(--sans); }
.hint { margin: 2px 0 0; font: 400 12px var(--sans); color: var(--graphite); }

.whead { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.whead h2 { margin: 0; font-family: var(--display); font-weight: 900; font-size: 30px; line-height: 1; letter-spacing: .01em; text-transform: uppercase; }
.whead h2 > span { font: 500 18px var(--mono); letter-spacing: .02em; color: var(--graphite); }
.sorts { display: flex; gap: 6px; align-items: center; }
.sorts > span { font: 500 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--graphite); }
.chip { appearance: none; background: #fff; color: var(--ink); border: 1px solid #D9D7D1; border-radius: var(--r); padding: 7px 11px; font: 600 14px var(--sans); cursor: pointer; white-space: nowrap; flex: 0 0 auto; }
.chip span { margin-left: 6px; font: 500 12px var(--mono); color: var(--graphite); }
.chip[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
@media (hover: hover) { .chip:hover { border-color: var(--red); color: var(--red); } }
.ideas { display: flex; gap: 8px; overflow-x: auto; margin: 12px 0 14px; padding-bottom: 4px; scrollbar-width: none; }
.ideas::-webkit-scrollbar { display: none; }

.cols { display: flex; gap: 10px; align-items: flex-start; }
.col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.arch .t { position: relative; display: block; background: #E2E1DC; overflow: hidden; color: #fff; text-decoration: none; transition: transform .18s ease, box-shadow .18s ease; }
.arch .t::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--red); opacity: 0; transition: opacity .15s ease; z-index: 3; }
.arch .t:focus-visible::after { opacity: 1; }
@media (hover: hover) { .arch .t:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(0,0,0,.18); color: #fff; } .arch .t:hover::after { opacity: 1; } }
.arch .t img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.arch .t .slot { position: absolute; inset: 0; display: grid; place-items: center; padding: 12px; text-align: center; font: 500 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--graphite); }
.arch .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 28px 10px 9px; display: flex; flex-direction: column; gap: 2px; background: linear-gradient(rgba(17,17,16,0), rgba(17,17,16,.66)); }
.arch .cap b { min-width: 0; font-family: var(--display); font-size: 17px; font-weight: 900; letter-spacing: .01em; text-transform: uppercase; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.arch .cap .r2 { font: 500 13px var(--mono); letter-spacing: .03em; color: rgba(255,255,255,.85); }
.wallpane .foot { margin-top: 28px; padding-left: 0; padding-right: 0; }

@media (min-width: 1000px) {
  html:has(.arch) { overflow: hidden; }
  body:has(.arch) { height: 100vh; height: 100dvh; display: flex; flex-direction: column; }
  body:has(.arch) .top { flex: 0 0 auto; }
  .arch { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(380px, 33.34%) minmax(0, 1fr); }
  .rail, .wallpane { overflow-y: auto; min-height: 0; scrollbar-width: thin; }
  .rail { border-right: 1px solid var(--hair); padding-right: 24px; }
  .rail .cta, .dock { display: none; }
  .col { gap: 16px; }
  .cols { gap: 16px; }
  .wallpane .foot { padding-bottom: 28px; }
}
@media (max-width: 999px) {
  /* phone: the small portrait sits beside the name, so the write-up starts on the first screen */
  .rail { display: grid; grid-template-columns: 112px minmax(0, 1fr); column-gap: 14px; row-gap: 14px; align-items: end; }
  .rail > * { grid-column: 1 / -1; }
  .rail .portrait { grid-column: 1; grid-row: 1 / span 3; align-self: start; }
  .rail .portrait img { width: 112px; height: 140px; aspect-ratio: auto; max-height: none; }
  .rail .portrait figcaption { font-size: 10px; }
  .rail:not(.noport) .kicker, .rail:not(.noport) h1, .rail:not(.noport) .facts { grid-column: 2; }
  .rail:not(.noport) h1 { font-size: 44px; }
  .arch .cap b { font-size: 15px; }
  .arch .cap .r2 { font-size: 12px; }
  .wallpane { padding-top: 24px; }
}