/* In-Line AGM — portfolio concepts A / B / C (2026-09-26, /creative-concepts round). All three keep study 05's style (Kire: "keep the style of the new design, just be creative"): paper ground, Archivo 400 with the Georgia italic accent, 11px tracked labels, mono at rest and color on intent. They differ in layout, sequence, interaction and point of view only. */ /* ---------- shared card ---------- */ #agm-concept .cx-card{display:flex;flex-direction:column;min-width:0} #agm-concept .cx-img{display:block;overflow:hidden;background:var(--agm-pale);aspect-ratio:3/2;margin-bottom:18px} #agm-concept .cx-a .cx-img{aspect-ratio:4/3} #agm-concept .cx-img img{width:100%;height:100%;object-fit:cover;filter:grayscale(1);transition:filter .6s ease,transform .8s ease} #agm-concept .cx-where{color:var(--agm-muted);margin-bottom:6px} #agm-concept .cx-name{font-size:clamp(20px,1.75vw,25px);line-height:1.25;letter-spacing:-.03em} #agm-concept .cx-sub{font-size:15px;line-height:1.5;color:var(--agm-muted);margin-top:6px} #agm-concept .cx-sub em{font-family:Georgia,'Times New Roman',serif;font-style:italic;letter-spacing:-.01em} #agm-concept .cx-card:focus-visible .cx-img img{filter:grayscale(0)} @media(hover:hover){ #agm-concept .cx-card:hover .cx-img img{filter:grayscale(0);transform:scale(1.02)} } /* Kire 2026-10-02: "keep photos black and white, project page photos in color". The Projects cards rest in black and white on phones too (like Home, About, Systems); the project page keeps color. The 10/02 color-while-pressed rule was removed 2026-10-23: on iOS a scrolling finger is a press, and the photos flashed (Kire: "it's still blinking"). */ #agm-concept .cx-card.is-in{animation:cx-in .45s ease both} @keyframes cx-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} /* shared tab row (A) */ #agm-concept .cx-tabs{display:flex;flex-wrap:wrap;column-gap:30px} #agm-concept .cx-tabs button{background:none;border:0;border-bottom:1px solid transparent;padding:10px 0 9px;min-height:44px;font-size:17px;letter-spacing:-.01em;color:var(--agm-muted);transition:color .25s ease,border-color .25s ease} #agm-concept .cx-tabs button em{font-family:Georgia,'Times New Roman',serif;font-style:italic;font-size:16px;margin-left:4px;color:#9a9a95} #agm-concept .cx-tabs button[aria-checked='true'] em{color:var(--agm-muted)} #agm-concept .cx-tabs button[aria-checked='true'],#agm-concept .cx-tabs button:hover{color:var(--agm-ink)} #agm-concept .cx-tabs button[aria-checked='true']{border-bottom-color:var(--agm-ink)} /* ---------- A · Register ---------- */ #agm-concept .cx-a-register{padding:0 var(--agm-content-gutter) 84px} #agm-concept .cx-a-bar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:20px 40px;border-top:1px solid var(--agm-line);padding:64px 0 44px} #agm-concept .cx-a-state{font-size:clamp(34px,3.6vw,52px);line-height:1.08;letter-spacing:-.04em;color:var(--agm-ink)} #agm-concept .cx-a-state em{letter-spacing:-.035em} #agm-concept .cx-a-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:64px 40px} #agm-concept .cx-print-note{display:none} /* ---------- B · Viewer ---------- */ #agm-concept .cx-b-wrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:64px;padding:0 var(--agm-content-gutter) 84px} #agm-concept .cx-b-viewer{position:sticky;top:24px;align-self:start;margin:0} #agm-concept .cx-b-frame{aspect-ratio:4/5;max-height:calc(100vh - 160px);overflow:hidden;background:var(--agm-pale)} #agm-concept .cx-b-frame img{width:100%;height:100%;object-fit:cover;filter:grayscale(1);transition:filter .5s ease,opacity .25s ease} #agm-concept .cx-b-viewer.is-live .cx-b-frame img{filter:grayscale(0)} #agm-concept .cx-b-frame img.is-swapping{opacity:0} #agm-concept .cx-b-viewer figcaption{display:grid;gap:4px;padding-top:16px} #agm-concept .cx-b-where{color:var(--agm-muted)} #agm-concept .cx-b-name{font-size:28px;line-height:1.25;letter-spacing:-.035em;color:var(--agm-ink)} #agm-concept .cx-b-sub{font-size:13px;color:var(--agm-muted)} #agm-concept .cx-b-index{border-top:1px solid var(--agm-line)} #agm-concept .cx-b-states{display:flex;flex-wrap:wrap;gap:6px 20px;padding:18px 0 8px} #agm-concept .cx-b-states button{display:flex;align-items:center;gap:8px;min-height:48px;background:none;border:0;border-bottom:1px solid transparent;padding:4px 0;color:var(--agm-muted);font-size:13px} #agm-concept .cx-b-states svg{fill:currentColor;opacity:.55;transition:opacity .3s ease} #agm-concept .cx-b-states button[aria-pressed='true'],#agm-concept .cx-b-states button:hover{color:var(--agm-ink)} #agm-concept .cx-b-states button[aria-pressed='true']{border-bottom-color:var(--agm-ink)} #agm-concept .cx-b-states button[aria-pressed='true'] svg,#agm-concept .cx-b-states button:hover svg{opacity:1} #agm-concept .cx-b-code{font-weight:500;letter-spacing:.13em;font-size:11px} #agm-concept .cx-b-n{font-size:11px;vertical-align:super} #agm-concept .cx-b-group-title{display:flex;justify-content:space-between;color:var(--agm-muted);padding:36px 0 12px;border-bottom:1px solid var(--agm-line)} #agm-concept .cx-b-list{list-style:none;margin:0;padding:0} #agm-concept .cx-b-row{display:grid;grid-template-columns:minmax(0,1fr) auto 24px;align-items:baseline;gap:16px;min-height:52px;padding:14px 0 12px;border-bottom:1px solid var(--agm-line);transition:color .3s ease} #agm-concept .cx-b-thumb{display:none} #agm-concept .cx-b-name-row{font-size:19px;line-height:1.3;letter-spacing:-.02em;transition:transform .35s ease} #agm-concept .cx-b-city{font-size:13px;color:var(--agm-muted)} #agm-concept .cx-b-row .agm-arrow{font-size:18px;justify-self:end;opacity:0;transition:opacity .3s ease,transform .3s ease} #agm-concept .cx-b-row.is-active .cx-b-name-row{transform:translateX(10px)} #agm-concept .cx-b-row.is-active .agm-arrow,#agm-concept .cx-b-row:focus-visible .agm-arrow{opacity:1} @media(hover:hover){ #agm-concept .cx-b-list:hover .cx-b-row:not(.is-active){color:#9a9a95} } /* ---------- C · Four states ---------- */ #agm-concept .cx-c-jump{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin:0 var(--agm-content-gutter);padding:28px 0 8px;border-top:1px solid var(--agm-line)} #agm-concept .cx-c-jump a{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:16px;align-items:center;min-height:56px;color:var(--agm-muted)} #agm-concept .cx-c-jump svg{grid-row:1/3;fill:currentColor;opacity:.5;transition:opacity .3s ease} #agm-concept .cx-c-jump .agm-label{align-self:end} #agm-concept .cx-c-jn{font-size:13px;align-self:start} #agm-concept .cx-c-jump a:hover,#agm-concept .cx-c-jump a:focus-visible{color:var(--agm-ink)} #agm-concept .cx-c-jump a:hover svg{opacity:1} #agm-concept .cx-c-chapter{padding-top:84px;scroll-margin-top:0} #agm-concept .cx-c-head{display:grid;grid-template-columns:132px minmax(0,1fr) auto;gap:40px;align-items:end;margin:0 var(--agm-content-gutter);padding-bottom:36px;border-bottom:1px solid var(--agm-line)} #agm-concept .cx-c-shape{fill:var(--agm-ink);opacity:.9} #agm-concept .cx-c-head .agm-label{color:var(--agm-muted);margin-bottom:16px} #agm-concept .cx-c-head h2{font-size:clamp(30px,3vw,42px);line-height:1.12;letter-spacing:-.04em;color:var(--agm-ink)} #agm-concept .cx-c-head h2 em{display:block;margin-top:4px} #agm-concept .cx-c-cities{font-size:14px;line-height:1.7;color:var(--agm-muted);margin-top:16px;max-width:60ch} #agm-concept .cx-c-arrows{display:flex;gap:10px} #agm-concept .cx-c-arrows button{width:48px;height:48px;border:1px solid var(--agm-line);border-radius:50%;background:none;font:400 18px/1 Arial,sans-serif;color:var(--agm-ink);transition:background .25s ease,color .25s ease,opacity .25s ease} #agm-concept .cx-c-arrows button:hover{background:var(--agm-ink);color:var(--agm-paper)} #agm-concept .cx-c-arrows button:disabled{opacity:.3;pointer-events:none} #agm-concept .cx-c-rail{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(250px,23vw,300px);gap:28px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:var(--agm-content-gutter);padding:36px var(--agm-content-gutter) 20px;scrollbar-width:thin} #agm-concept .cx-c-rail .cx-card{scroll-snap-align:start} #agm-concept .cx-c-rail .cx-img{aspect-ratio:4/5} #agm-concept .cx-c .agm-contact{margin-top:84px} /* ---------- tablet / phone ---------- */ @media(max-width:1000px){ #agm-concept .cx-a-grid{grid-template-columns:repeat(2,minmax(0,1fr))} #agm-concept .cx-c-jump{grid-template-columns:repeat(2,minmax(0,1fr))} } @media(max-width:760px){ #agm-concept .cx-a-bar{padding:40px 0 28px} #agm-concept .cx-a-grid{grid-template-columns:1fr;gap:40px} #agm-concept .cx-b-wrap{grid-template-columns:1fr;gap:0} #agm-concept .cx-b-viewer{display:none} #agm-concept .cx-b-row{grid-template-columns:56px minmax(0,1fr) 20px;grid-template-rows:auto auto;align-items:center;column-gap:14px;row-gap:0} #agm-concept .cx-b-thumb{display:block;grid-row:1/3} #agm-concept .cx-b-thumb img{width:56px;height:56px} #agm-concept .cx-b-name-row{grid-column:2;font-size:17px} #agm-concept .cx-b-city{grid-column:2} #agm-concept .cx-b-row .agm-arrow{grid-column:3;grid-row:1/3;opacity:1} #agm-concept .cx-c-head{grid-template-columns:72px minmax(0,1fr);gap:20px} #agm-concept .cx-c-shape{width:72px;height:72px} #agm-concept .cx-c-arrows{display:none} #agm-concept .cx-c-rail{grid-auto-columns:72vw;gap:16px} #agm-concept .cx-c-chapter{padding-top:56px} } @media(prefers-reduced-motion:reduce){ #agm-concept .cx-card.is-in{animation:none} } /* Wider page for the portfolio + project pages: 1280px of content (Kire: "enlarge the photos a bit"). 34 of 47 card photos are 1180px wide — sharp on a retina screen up to ~590px, and a three-across card at 1280 is 400px, so this is as large as the photographs allow without going soft (Atlas). */ /* Print: the filtered grid becomes a reference list a GC can attach to a prequalification (Atlas). */ @media print{ #agm-concept .agm-header,#agm-concept .agm-work-intro,#agm-concept .cx-tabs,#agm-concept .agm-contact,#agm-concept .agm-foot-band{display:none!important} #agm-concept .cx-a-bar{padding:0 0 12px;border:0} #agm-concept .cx-a-grid{display:block} #agm-concept .cx-a-grid .cx-card{display:grid;grid-template-columns:90px 1fr 1fr;gap:4px 16px;padding:8px 0;border-bottom:1px solid #ccc;break-inside:avoid} #agm-concept .cx-a-grid .cx-img{grid-row:1/4;margin:0;aspect-ratio:4/3} #agm-concept .cx-a-grid .cx-img img{filter:none} #agm-concept .cx-print-note{display:block;margin-top:16px;font-size:11px} } /* ---------- Project page (Plaza's structure, study 05's style) ---------- */ #agm-concept .px{padding:0 var(--agm-content-gutter)} #agm-concept .px-top{display:flex;justify-content:space-between;align-items:center;gap:20px;padding-top:28px} #agm-concept .px-kicker{color:var(--agm-muted)} #agm-concept .px-title{font:400 clamp(40px,4.6vw,64px)/1.05 Archivo,Arial,sans-serif;letter-spacing:-.045em;color:var(--agm-ink);margin-top:22px;max-width:18ch;text-wrap:balance} #agm-concept .px-credit{font-size:13px;color:var(--agm-muted);margin-top:20px} /* The title block: the box in the corner of every drawing sheet (Atlas). Hairline cells, tracked labels. */ #agm-concept .px-more{padding-top:84px} #agm-concept .px-more-title{color:var(--agm-muted);border-top:1px solid var(--agm-line);padding:14px 0 28px} #agm-concept .px-more-title strong{font-weight:500;color:var(--agm-ink)} #agm-concept .px-more .cx-img{aspect-ratio:4/3} #agm-concept .px-next{margin:84px 0} @media(max-width:760px){ #agm-concept .px-more .cx-a-grid{grid-template-columns:1fr} #agm-concept .px-next{margin:56px 0} } #agm-concept .px-sources{margin-top:16px;font-size:13px;color:var(--agm-muted)} #agm-concept .px-sources summary{cursor:pointer;min-height:44px;display:flex;align-items:center;letter-spacing:.13em;text-transform:uppercase;font-size:11px;font-weight:500} #agm-concept .px-sources ul{margin:4px 0 0;padding:0;list-style:none;display:grid;gap:6px} #agm-concept .px-sources a{text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere} /* ---------- Project page, David's format (supersedes the title block) ---------- */ #agm-concept .pd-address{font-size:clamp(17px,1.5vw,20px);color:var(--agm-muted)} #agm-concept .pd-address em{font-family:Georgia,'Times New Roman',serif} #agm-concept .pd-meta{display:flex;flex-wrap:wrap;gap:4px 28px;margin-top:18px} #agm-concept .pd-meta:empty{display:none} #agm-concept .pd .px-sources{margin-top:18px} /* One flow (2026-09-26): read → look. Story sits under the facts; the photographs are one run. */ /* ---------- The spread: sticky colophon + photographs (supersedes the stacked layouts above) ---------- */ #agm-concept .pd-spread{display:grid;align-items:start;margin-top:36px} #agm-concept .pd-aside{position:sticky} #agm-concept .pd-aside::-webkit-scrollbar{display:none} #agm-concept .pd-aside .pd-address{font-size:17px} #agm-concept .pd-colophon{margin:28px 0 0;border-top:1px solid var(--agm-ink)} #agm-concept .pd-c dt{font-weight:500;margin:0} #agm-concept .pd-c dd{color:var(--agm-ink)} #agm-concept .pd-c dd b{font-weight:500} #agm-concept .pd-aside .pd-meta{margin-top:14px} #agm-concept .pd-press-line{color:var(--agm-ink)} #agm-concept .pd-press-line a:hover{text-decoration:underline;text-underline-offset:4px} #agm-concept .pd-sep{color:#9a9a95} #agm-concept .pd-aside .px-credit{margin-top:14px} #agm-concept .pd-aside .px-sources{margin-top:6px} /* Plate numbers, as in a monograph — shown on hover/focus only, so the page stays quiet at rest. */ #agm-concept .pd .px-more{padding-top:112px} @media(max-width:900px){ #agm-concept .pd-spread{grid-template-columns:1fr;gap:32px;margin-top:24px} #agm-concept .pd-aside{position:static;max-height:none;overflow:visible} #agm-concept .pd-name{max-width:none} } /* ---------- Type pass on the spread (Kire: "play with font size, shape, style") ---------- */ #agm-concept .pd-name{margin:0;font-size:clamp(46px,5vw,72px);line-height:.98;letter-spacing:-.05em;max-width:none} #agm-concept .pd-name--mid{font-size:clamp(40px,3.9vw,56px)} #agm-concept .pd-name--long{font-size:clamp(32px,2.9vw,42px);line-height:1.06;letter-spacing:-.035em} #agm-concept .pd-aside .pd-address{line-height:1.45;display:grid;gap:8px;margin-top:18px} #agm-concept .pd-aside .pd-address em{line-height:1.3;color:var(--agm-ink)} #agm-concept .pd-figs{grid-template-columns:repeat(auto-fit,minmax(88px,1fr));border-top:1px solid var(--agm-ink)} #agm-concept .pd-figs + .pd-colophon{border-top:0;margin-top:0} #agm-concept .pd-back-o{display:inline-grid;place-items:center;width:40px;height:40px;border:1px solid var(--agm-line);border-radius:50%;font:400 16px/1 Arial,sans-serif;transition:background .25s ease,color .25s ease,border-color .25s ease} #agm-concept .pd-back:hover .pd-back-o{background:var(--agm-ink);color:var(--agm-paper);border-color:var(--agm-ink);transform:none} #agm-concept .pd-back:hover>span.pd-back-o{transform:none} @media(max-width:900px){ #agm-concept .pd-name{font-size:clamp(40px,11vw,56px)} #agm-concept .pd-name--long{font-size:32px} } /* ---------- /ui-ux-critic fixes (2026-09-26) ---------- */ /* A. The colophon is never clipped: no max-height, no hidden scroll. When it is taller than the viewport (1280×720 laptop: 661px in 592px), portfolio.js lifts its sticky top so its END stays reachable. */ #agm-concept .pd-aside{padding-bottom:8px;scrollbar-width:none;max-height:none;overflow:visible;top:var(--pd-top,104px)} /* C. The action lives where the reader decides. */ /* D. One small size (13), one body size (15), one reading size (17): the 12/14/16 near-duplicates go. */ #agm-concept .pd-press-line{line-height:1.9;margin-top:22px;font-size:15px} #agm-concept .pd-press-line a{font-style:italic;font-family:Georgia,'Times New Roman',serif;font-size:15px} /* B. Phone: the building in the first screen. Name, address, then the lead photograph, then the facts. */ @media(max-width:900px){ #agm-concept .pd-spread{display:flex;flex-direction:column;align-items:stretch;gap:0} #agm-concept .pd-figs{grid-template-columns:repeat(3,minmax(0,1fr))} #agm-concept .pd-name{order:1} #agm-concept .pd-aside .pd-address{order:2} #agm-concept .pd-figs{order:4} #agm-concept .pd-colophon{order:5} #agm-concept .pd-sentence{order:6} #agm-concept .pd-meta{order:7} #agm-concept .pd-cta{order:8;align-self:flex-start} #agm-concept .pd-press-line{order:9} #agm-concept .pd-aside .px-credit{order:10} #agm-concept .pd-aside .px-sources{order:11} } #agm-concept .pd-back{font-size:13px;gap:14px;white-space:nowrap;flex-shrink:0} /* ---------- Round 3 (2026-09-26, /studio → frontend-design): readable colophon, one-column plates ---------- */ /* ONE accent, from the logo: brand navy. Its rule — numbers and the action only (figures, plate numbers, "Discuss a similar project"). Never body text, never headings, never a background. 8.1:1 on paper. */ #agm-concept.agm-wide{--agm-content-gutter:max(var(--agm-gutter),calc((100% - 1280px)/2));--agm-accent:#1c5291} #agm-concept .pd-spread{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px} /* Colophon — sized for reading, not for labelling. */ #agm-concept .pd-aside .pd-address em{letter-spacing:-.01em;font-family:Georgia,'Times New Roman',serif;font-size:24px} #agm-concept .pd-aside .pd-address .agm-label{line-height:1.6;font-size:12px;color:#4d4d49} #agm-concept .pd-figs{border-bottom:1px solid var(--agm-line);gap:0;display:grid;margin-top:32px} #agm-concept .pd-fig{gap:6px;display:grid;padding:18px 14px 16px 0} #agm-concept .pd-fig + .pd-fig{border-left:1px solid var(--agm-line);padding-left:18px} #agm-concept .pd-fig-v{font-variant-numeric:lining-nums;letter-spacing:-.03em;line-height:1;font-style:italic;font-family:Georgia,'Times New Roman',serif;font-size:clamp(34px,3vw,46px);color:var(--agm-accent)} #agm-concept .pd-fig .agm-label{font-size:12px;color:#4d4d49} #agm-concept .pd-c{align-items:baseline;border-bottom:1px solid var(--agm-line);gap:12px;display:grid;grid-template-columns:150px minmax(0,1fr);padding:14px 0} #agm-concept .pd-c dt{text-transform:uppercase;letter-spacing:.13em;font-size:12px;color:#4d4d49} #agm-concept .pd-c dd{line-height:1.45;margin:0;font-size:17px} #agm-concept .pd-sentence{color:var(--agm-ink);letter-spacing:-.005em;font-size:19px;line-height:1.6;margin-top:30px} #agm-concept .pd-cta{gap:24px;font-size:15px;color:var(--agm-accent);border-bottom-color:var(--agm-accent);margin-top:28px} #agm-concept .pd-press-line,#agm-concept .pd-press-line a{font-size:17px} #agm-concept .pd-press-line .agm-label{margin-bottom:2px;display:block;font-size:12px;color:#4d4d49} #agm-concept .pd-aside .px-credit{font-size:13px;color:#4d4d49} /* Plates — one column, a walk around the building. */ @media(max-width:900px){ #agm-concept .pd-c{grid-template-columns:120px minmax(0,1fr)} } /* ---------- Round 3 fixes (/ui-ux-critic 2026-09-26) ---------- */ /* One label grey on the project page (#4d4d49, 8.3:1), not two. */ #agm-concept.agm-project-page{--agm-muted:#4d4d49} /* Figures sit BELOW the name in scale, and are the only navy besides the action. */ #agm-concept .pd-fig-v{font-size:clamp(26px,2.2vw,32px)} /* Plates: one column; inset plates share one left edge; number under every plate, one size, one place. */ #agm-concept .pd-plates{display:flex;flex-direction:column;gap:56px} #agm-concept .pd-plate{margin:0} #agm-concept .pd-plate--in-r{padding-left:20%} #agm-concept .pd-plate--in-l{padding-right:20%} #agm-concept .pd-plate--tall .agm-photo{width:62%} #agm-concept .pd-plate .agm-photo img{width:100%;height:auto} #agm-concept .pd-plate-no{display:flex;align-items:baseline;gap:6px;padding-top:10px;color:var(--agm-muted);font-size:12px;letter-spacing:.08em} #agm-concept .pd-plate-no em{font-family:Georgia,'Times New Roman',serif;font-style:italic;font-size:22px;letter-spacing:-.02em;line-height:1;color:var(--agm-ink)} @media(max-width:900px){ #agm-concept .pd-plate{order:12;margin-top:48px} #agm-concept .pd-plate.pd-lead{order:3;margin-top:24px} #agm-concept .pd-plate--in-r{padding-left:14%} #agm-concept .pd-plate--in-l{padding-right:14%} #agm-concept .pd-plate--tall .agm-photo{width:78%} } /* Only the reading part sticks (name → action); credit, press and sources rest at the foot of the column. Keeps the sticky part short enough to stay below the header on a 1440×900 screen (/ui-ux-critic). */ #agm-concept .pd-aside{position:static;display:flex;flex-direction:column;align-self:stretch;max-height:none} #agm-concept .pd-stickwrap{flex:1 0 auto} #agm-concept .pd-stick{position:sticky;top:var(--pd-top,104px)} #agm-concept .pd-foot{padding-top:40px} @media(max-width:900px){ #agm-concept .pd-aside,#agm-concept .pd-stickwrap,#agm-concept .pd-stick,#agm-concept .pd-foot,#agm-concept .pd-plates{display:contents} #agm-concept .pd-spread{gap:0} } /* "Next project" removed (Kire 2026-09-26): the "More in" row is the page's last word before the contact band. */ #agm-concept .pd .px-more{padding-bottom:112px} /* ---------- Portfolio: two facets, Where + Completed (2026-09-26) ---------- */ #agm-concept .cx-a-bar{display:block} #agm-concept .cx-facets{display:flex;flex-wrap:wrap;gap:20px 64px;margin-top:32px} #agm-concept .cx-facet .agm-label{color:var(--agm-muted);margin-bottom:2px} #agm-concept .cx-tabs button.is-zero{opacity:.35} #agm-concept .cx-yr{color:var(--agm-muted)} #agm-concept .cx-empty{padding:12px 0 48px;font-size:17px} #agm-concept .cx-reset{background:none;border:0;border-bottom:1px solid currentColor;padding:0;margin-left:8px;font:inherit;color:var(--agm-ink);min-height:44px;cursor:pointer} @media(max-width:760px){#agm-concept .cx-facets{gap:16px;margin-top:24px}#agm-concept .cx-tabs{column-gap:20px}} /* /ui-ux-critic fixes (2026-09-26): readable dimmed state, readable counts, no layout shift. */ #agm-concept .cx-tabs button em{color:var(--agm-muted);display:inline-block;min-width:2ch;font-variant-numeric:tabular-nums lining-nums} #agm-concept .cx-tabs button.is-zero{opacity:1;color:#8a8a86} #agm-concept .cx-tabs button.is-zero em{color:#8a8a86} #agm-concept .cx-tabs button.is-zero[aria-checked='true'],#agm-concept .cx-tabs button.is-zero[aria-checked='true'] em{color:var(--agm-ink)} #agm-concept .cx-note{min-height:24px;margin:14px 0 0;font-size:14px;color:var(--agm-muted)} #agm-concept .cx-note:empty{visibility:hidden} @media(max-width:760px){ #agm-concept .cx-a-state{min-height:calc(2 * 1.08em)} #agm-concept .cx-facets{display:grid;gap:12px} #agm-concept .cx-facet{min-width:0} #agm-concept .cx-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-right:calc(-1 * var(--agm-gutter));padding-right:var(--agm-gutter)} #agm-concept .cx-tabs::-webkit-scrollbar{display:none} #agm-concept .cx-tabs button{white-space:nowrap;flex-shrink:0} } /* The two facets stack by design (one labelled row each) — no wrap-dependent jump between widths. */ #agm-concept .cx-facets{display:grid;gap:18px} #agm-concept .cx-note{margin:18px 0 22px} @media(max-width:760px){#agm-concept .cx-note{min-height:42px}} @media(max-width:760px){#agm-concept .cx-a-state{min-height:2.3em}} /* ================= TYPE PARITY with the approved home (2026-09-26) ================= Kire: "why is the font different than the original one .. I never told you to change the font." Every text element below maps to a role the approved home (/) or the designer's kit already uses — verified by scripts/page-shot/roles.js (0 new roles). Rules of this system: · Georgia italic ONLY as the accent word inside a display headline (never figures, addresses, links, numbers) · color = ink #20201e + ONE muted #62625e. No navy on text, no third grey · labels 11/500/+.13em uppercase · list 17/400 · card title 24/400 −.04em · small 12–13/400 · links 13/500 underlined */ #agm-concept.agm-project-page,#agm-concept.agm-wide{--agm-muted:#62625e} #agm-concept .pd-back{gap:12px;font-size:13px;color:var(--agm-muted)} #agm-concept .pd-back>span{font-size:20px;line-height:1;border:0;border-radius:0} #agm-concept .pd-back:hover{color:var(--agm-ink)} #agm-concept .pd-aside .pd-address{gap:6px} #agm-concept .pd-street{font-size:17px;line-height:1.4;color:var(--agm-ink)} #agm-concept .pd-aside .pd-address .agm-label,#agm-concept .pd-fig .agm-label,#agm-concept .pd-c dt,#agm-concept .pd-press-line .agm-label{font-size:11px;color:var(--agm-muted)} #agm-concept .pd-fig-v{font-family:Archivo,Arial,sans-serif;font-style:normal;font-size:24px;line-height:1.1;letter-spacing:-.04em;color:var(--agm-ink)} #agm-concept .pd-fig-v--word{font-size:24px} #agm-concept .pd-c dd{font-size:17px} #agm-concept .pd-sentence{font-size:17px;line-height:1.65;letter-spacing:0} #agm-concept .pd-cta{font-size:13px;font-weight:500;color:var(--agm-ink);border-bottom-color:currentColor} #agm-concept .pd-press-line,#agm-concept .pd-press-line a{font-family:Archivo,Arial,sans-serif;font-style:normal;font-size:13px;font-weight:500} #agm-concept .pd-sep{color:var(--agm-muted)} #agm-concept .pd-aside .px-credit{font-size:12px;color:var(--agm-muted)} #agm-concept .pd-plate-no{font-size:11px;font-weight:400;letter-spacing:.09em;color:var(--agm-ink)} /* Header: the home's menu control, not a resized copy. */ #agm-concept.agm-portfolio-page .agm-menu{gap:17px} #agm-concept.agm-portfolio-page .agm-menu-lines{width:34px;gap:7px} #agm-concept.agm-portfolio-page .agm-menu[aria-expanded='true'] .agm-menu-lines span:nth-child(1){transform:translateY(8px) rotate(45deg)} #agm-concept.agm-portfolio-page .agm-menu[aria-expanded='true'] .agm-menu-lines span:nth-child(3){transform:translateY(-8px) rotate(-45deg)} /* Portfolio: the section headline takes the home's contact-heading role (46px + Georgia-italic accent). */ #agm-concept .cx-a-state{font-size:clamp(32px,3.2vw,46px);letter-spacing:-.035em;line-height:1.18} #agm-concept .cx-a-state em{font-size:1.04em;letter-spacing:-.045em} #agm-concept .cx-tabs button em{font-family:Archivo,Arial,sans-serif;font-style:normal;font-size:11px;letter-spacing:0;color:var(--agm-muted)} #agm-concept .cx-name{font-size:24px;letter-spacing:-.04em} #agm-concept .cx-sub{font-family:Archivo,Arial,sans-serif;font-style:normal;font-size:12px;letter-spacing:0;color:var(--agm-muted)} #agm-concept .cx-sub em{font:inherit} /* Section headline on paper = the home's section heading ("Built to last."): 42/400 with the accent word at 500, Archivo — the Georgia accent at this size exists only white-on-dark in the contact band. */ #agm-concept .cx-a-state{font-size:clamp(30px,2.9vw,42px);letter-spacing:-.035em;line-height:1.2} #agm-concept .cx-a-state em{font-family:Archivo,Arial,sans-serif;font-style:normal;font-weight:500;font-size:1em;letter-spacing:-.035em} /* Phone roles, measured on the approved pages at 390: section heading 32/400 (home), project title 34/400 −.045 (kit detail), small caps = the home's 11/500 label. */ @media(max-width:900px){ #agm-concept .cx-a-state{font-size:32px} #agm-concept .pd-name,#agm-concept .pd-name--mid,#agm-concept .pd-name--long{font-size:34px;letter-spacing:-.045em;line-height:1.1} #agm-concept .agm-work-introduction>span{font-size:11px;font-weight:500;letter-spacing:.13em} } /* 2026-09-27 — outside review L1/L4 (Kire: "go with 1-5"). The first photograph started at 637px of a 900px screen: the kit intro is tightened and the register head ("Work across four states") sits on ONE row with its filter, so the work starts at ~445px. Nothing removed. Then twelve at a time with "Show more projects". */ #agm-concept .agm-work-intro{padding-top:48px;padding-bottom:40px} @media(min-width:901px){ #agm-concept .cx-a-bar{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;padding:40px 0 34px} #agm-concept .cx-a-bar .cx-facets{margin-top:0} } @media(max-width:760px){#agm-concept .agm-work-intro{padding-top:32px;padding-bottom:28px}#agm-concept .cx-a-bar{padding-top:28px;padding-bottom:24px}} #agm-concept .cx-more{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-top:56px;padding-top:22px;border-top:1px solid var(--agm-line)} #agm-concept .cx-more[hidden]{display:none} #agm-concept .cx-more-count{color:var(--agm-muted)} #agm-concept .cx-more-btn{background:transparent;border:0;border-bottom:1px solid currentColor;border-radius:0;padding:0;cursor:pointer;font-family:inherit;color:var(--agm-ink)} #agm-concept .cx-more-btn[hidden]{display:none} @media print{#agm-concept .cx-more{display:none}} /* 2026-09-27 — the plate run (outside review P3/P4/P5). Captions sit in the plate-number role, after the number. The film is a plate: its still, grayscale at rest like every plate, with a square outlined play control. */ #agm-concept .pd-plate-cap{margin-left:0} /* no plate number before it since 2026-10-01 (Kire: "remove numbers all together") */ #agm-concept .pd-film-btn{position:relative;display:block;width:100%;padding:0;border:0;background:none;cursor:pointer} #agm-concept .pd-film-btn img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;filter:grayscale(1);transition:filter .6s ease} #agm-concept .pd-film-btn:hover img,#agm-concept .pd-film-btn:focus-visible img{filter:grayscale(0)} #agm-concept .pd-film-play{position:absolute;left:50%;top:50%;width:64px;height:64px;transform:translate(-50%,-50%);display:grid;place-items:center;border:1px solid rgba(255,255,255,.8);background:rgba(17,17,17,.18);color:#fff;transition:background .25s ease} #agm-concept .pd-film-btn:hover .pd-film-play,#agm-concept .pd-film-btn:focus-visible .pd-film-play{background:rgba(17,17,17,.45)} #agm-concept .pd-film-play .agm-play{margin-left:3px} #agm-concept .pd-all{margin-top:8px} #agm-concept .pd-all-btn{background:transparent;border:0;border-bottom:1px solid currentColor;border-radius:0;padding:0;cursor:pointer;font-family:inherit;color:var(--agm-ink)} /* ui-ux-critic 2026-09-27: plate numbers and captions in the study-05 kit's own caption role (muted, no tracking). */ #agm-concept .pd-plate-no{color:var(--agm-muted);letter-spacing:0;font-size:14px} /* The film's play control, legible at 1x on a bright still. */ #agm-concept .pd-film-play{background:rgba(17,17,17,.45);border-color:#fff} #agm-concept .pd-film-play .agm-play{border-left-width:14px;border-top-width:9px;border-bottom-width:9px} #agm-concept .pd-film-btn:hover .pd-film-play,#agm-concept .pd-film-btn:focus-visible .pd-film-play{background:rgba(17,17,17,.62)} /* 2026-09-28 (Kire): the card's name row carries the home cards' ↗, right-aligned, nudging on hover/focus. */ #agm-concept .cx-name-row{display:flex;justify-content:space-between;align-items:center;gap:16px} #agm-concept .cx-arrow{flex:none;font-size:22px;color:var(--agm-ink);transition:transform .25s ease} #agm-concept .cx-card:hover .cx-arrow,#agm-concept .cx-card:focus-visible .cx-arrow{transform:translate(2px,-2px)} @media(prefers-reduced-motion:reduce){#agm-concept .cx-arrow{transition:none}} /* ui-ux-critic 2026-09-28: the arrow sits level with the FIRST line of a wrapping name; tabs wrap on phones. */ #agm-concept .cx-name-row{align-items:flex-start} #agm-concept .cx-arrow{margin-top:4px} @media(max-width:767px){#agm-concept .cx-tabs{flex-wrap:wrap;overflow-x:visible;margin-right:0;padding-right:0}} /* MOBILE ROUND (2026-10-02). Projects: the first photo inside the first screen at 375x667 and tab hit areas. Project page: "View all photographs" below the title, 44px press links, inset plates flush on phones. */ #agm-concept .cx-tabs button{position:relative} #agm-concept .cx-tabs button::after{content:"";position:absolute;inset:0 -10px} #agm-concept .pd-press-line a{display:inline-flex;align-items:center;min-height:44px} @media(max-width:900px){#agm-concept .pd-all{order:13;margin-top:24px}} @media(max-width:760px){ #agm-concept .cx-a-bar{padding-top:20px;padding-bottom:16px} #agm-concept .cx-facets{margin-top:16px} } @media(max-width:600px){ #agm-concept .cx-a-state{min-height:0} #agm-concept .pd-plate--in-r,#agm-concept .pd-plate--in-l{padding-left:0;padding-right:0} } #agm-concept .pd-meta .agm-film-open{font-weight:500} #agm-concept .pd-meta .agm-film-length{font-weight:400} @media(hover:none){#agm-concept.agm-project-page .pd-film .pd-film-btn img{filter:grayscale(0)}} /* "All sources" says it opens (critic, mobile round): the down arrow "Show more projects" already uses, turned on open. */ #agm-concept .px-sources summary{gap:10px} #agm-concept .px-sources summary::-webkit-details-marker{display:none} #agm-concept .px-sources-arrow{transition:transform .2s ease} #agm-concept .px-sources[open] .px-sources-arrow{transform:rotate(180deg)} /* Kire, 2026-10-08 meeting: "Work across four states" removed from view, and the Where filter "goes on the left". The heading stays for screen readers only (it is the polite live region that announces "Work in New York" when a state is picked), so the filter's result is still spoken. */ #agm-concept .cx-a-state{position:absolute;width:1px;height:1px;min-height:0;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} #agm-concept .cx-a-bar{justify-content:flex-start} #agm-concept .cx-a-bar .cx-facets{margin-top:0} /* Sector facet (Kire, 2026-10-08 meeting: "There should be projects another break up - Private | Public. Should be placed here somewhere", on the right of the filter bar). Same facet styles as Where; pushed to the bar's right edge on desktop, below Where on phones. The empty Public view is one line in the 15px muted body role. */ @media(min-width:901px){ #agm-concept .cx-a-bar .cx-facets{display:flex;flex:1;justify-content:space-between;align-items:flex-end;gap:32px} } #agm-concept .cx-empty{margin:8px 0 40px;font-size:15px;line-height:1.7;color:var(--agm-muted)} #agm-concept .cx-empty .cx-empty-all{margin-left:16px;padding:0;border:0;border-bottom:1px solid currentColor;background:none;color:var(--agm-ink);cursor:pointer} @media(max-width:760px){#agm-concept .cx-empty .cx-empty-all{display:flex;width:fit-content;margin:4px 0 0}} /* ---------- PROJECTS FILTER, Kire's concept (2026-10-08: "build it, desktop as is, B on phones") ---------- Desktop: LOCATION | SECTOR on one row between two hairlines, a rule between the groups, options in full, the chosen one bold over a 2px line. Phones: a Filter button and a summary; the same choices in a bottom sheet. */ #agm-concept .agm-work-introduction{font-size:17px;line-height:1.55;letter-spacing:-.01em} @media(min-width:761px){#agm-concept.cx-a .agm-work-introduction{width:auto;max-width:none}} #agm-concept .cx-a-register .cx-a-bar{display:block;padding:40px 0 22px;border-top:1px solid var(--agm-line);border-bottom:1px solid var(--agm-line);margin-bottom:32px} #agm-concept .cx-a-register .cx-a-bar .cx-facets{display:flex;flex-wrap:nowrap;justify-content:flex-start;align-items:stretch;gap:0;margin:0} #agm-concept .cx-a-register .cx-facet .agm-label{margin-bottom:12px} #agm-concept .cx-a-register .cx-facet--sector{border-left:1px solid var(--agm-line);margin-left:72px;padding-left:56px} #agm-concept .cx-a-register .cx-tabs{flex-wrap:nowrap;column-gap:48px} #agm-concept .cx-a-register .cx-tabs button{border-bottom-width:2px;white-space:nowrap} #agm-concept .cx-a-register .cx-tabs button[aria-checked='true']{font-weight:600;color:var(--agm-ink)} /* The bold label's width is reserved by an invisible bold copy, so choosing an option never moves its neighbors. */ #agm-concept .cx-tabs button>span{display:inline-grid;justify-items:start;vertical-align:top} #agm-concept .cx-tabs button>span::before{content:attr(data-t);font-weight:600;visibility:hidden;height:0;overflow:hidden} #agm-concept .cx-fbar{display:none} #agm-concept .cx-sheet{display:none} @media(max-width:1439px) and (min-width:1280px){ #agm-concept .cx-a-register .cx-facet--sector{margin-left:56px;padding-left:48px} #agm-concept .cx-a-register .cx-tabs{column-gap:40px} } @media(max-width:1279px) and (min-width:761px){ #agm-concept .cx-a-register .cx-a-bar .cx-facets{flex-direction:column;gap:32px} #agm-concept .cx-a-register .cx-facet--sector{border-left:0;margin-left:0;padding-left:0} #agm-concept .cx-a-register .cx-tabs{column-gap:36px} } @media(max-width:760px){ #agm-concept .agm-work-introduction{font-size:14px;line-height:1.7;letter-spacing:normal} #agm-concept .cx-a-register .cx-a-bar{padding:16px 0;margin-bottom:24px} #agm-concept .cx-a-register .cx-a-bar .cx-facets{display:none} #agm-concept .cx-fbar{display:flex;justify-content:space-between;align-items:center;gap:12px} #agm-concept .cx-fbtn{display:inline-flex;flex:none;align-items:center;gap:10px;min-height:44px;padding:0 14px;border:1px solid var(--agm-ink);background:none;color:var(--agm-ink);font:400 17px/1 Archivo,Arial,sans-serif;letter-spacing:-.01em;cursor:pointer} #agm-concept .cx-fbtn svg{width:18px;height:18px} #agm-concept .cx-fsum{font-size:14px;line-height:1.4;color:var(--agm-muted);text-align:right} /* Two across with the names on the tab role (17px), so a screen shows four projects instead of one. */ #agm-concept .cx-a-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 12px} #agm-concept .cx-a-grid .cx-name{font-size:17px;line-height:1.3;letter-spacing:-.01em} #agm-concept .cx-a-grid .cx-arrow{display:none} #agm-concept .cx-a-grid .cx-img{margin-bottom:12px} #agm-concept .cx-sheet{display:block;position:fixed;inset:auto 0 0 0;width:100%;max-width:none;max-height:88vh;margin:0;padding:0;border:0;border-top:1px solid var(--agm-ink);background:var(--agm-paper);color:var(--agm-ink);overflow:auto;transform:translateY(100%);transition:transform .26s ease} /* The lightbox's generic dialog rule (portfolio.css: height 100%, grid when open) must not reach the sheet. */ #agm-concept .cx-sheet,#agm-concept .cx-sheet[open]{display:block;height:auto} #agm-concept .cx-sheet:not([open]){display:none} #agm-concept .cx-sheet.is-open{transform:none} #agm-concept .cx-sheet::backdrop{background:#1b1b1966;opacity:0;transition:opacity .26s ease} #agm-concept .cx-sheet.is-open::backdrop{opacity:1} #agm-concept .cx-sheet-go.is-none .agm-arrow{display:none} #agm-concept .cx-chip,#agm-concept .cx-fbtn,#agm-concept .cx-sheet-go,#agm-concept .cx-sheet-x,#agm-concept .cx-empty-all{-webkit-tap-highlight-color:transparent} #agm-concept .cx-sheet-in{padding:8px var(--agm-gutter) calc(24px + env(safe-area-inset-bottom,0px))} #agm-concept .cx-sheet-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px} #agm-concept .cx-sheet-head .agm-label{margin:0} #agm-concept .cx-sheet-x{display:grid;place-items:center;width:44px;height:44px;margin-right:-10px;background:none;border:0;color:var(--agm-ink);cursor:pointer} #agm-concept .cx-sheet-x svg{width:20px;height:20px} #agm-concept .cx-sheet .agm-label{color:var(--agm-muted);margin:16px 0 10px} #agm-concept .cx-chips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px} #agm-concept .cx-chip--all{grid-column:1/-1} #agm-concept .cx-chip{min-height:48px;padding:0 12px;border:1px solid var(--agm-line);background:none;color:var(--agm-muted);font:400 17px/1.2 Archivo,Arial,sans-serif;letter-spacing:-.01em;cursor:pointer} #agm-concept .cx-chip[aria-checked='true']{border-color:var(--agm-ink);box-shadow:inset 0 0 0 1px var(--agm-ink);color:var(--agm-ink);font-weight:600} #agm-concept .cx-chip:focus-visible,#agm-concept .cx-fbtn:focus-visible,#agm-concept .cx-sheet-x:focus-visible{outline:2px solid var(--agm-ink);outline-offset:2px} #agm-concept .cx-sheet-go{display:flex;width:100%;align-items:center;justify-content:space-between;min-height:56px;margin-top:24px;padding:15px 20px;border:1px solid var(--agm-deep);background:var(--agm-deep);color:#f5f5ef;font:500 13px/1 Archivo,Arial,sans-serif;letter-spacing:.025em;cursor:pointer} #agm-concept .cx-sheet-go .agm-arrow{font-size:26px} html.cx-sheet-on,html.cx-sheet-on body{overflow:hidden} } @media(prefers-reduced-motion:reduce){#agm-concept .cx-sheet{transition:none}} /* PROJECT PLATES, ONE SIZE (Kire, 2026-10-11: "Let's align the photos to be the same size"). Every plate, the film included, fills the column in the same 3:2 frame; a photograph of another shape is cropped to it, and the lightbox still opens it whole. */ #agm-concept .pd-plate .agm-photo{display:block;width:100%} #agm-concept .pd-plate .agm-photo img,#agm-concept .pd-film .pd-film-btn img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover} /* Thank-you page (2026-10-22): the project-page "More" cards inside the page gutter, one link under them. */ #agm-concept .ty-work{padding:20px var(--agm-content-gutter) 96px} #agm-concept .ty-all{margin:28px 0 0} /* PRE-LAUNCH FIX 5 (2026-10-23, ui-ux-critic): project figures on phones. Three columns at 390 left "Underway" 5px past the rule (Montgomery Street). Tighter inner padding on phones only; the type stays on its existing role. */ @media(max-width:760px){ #agm-concept .pd-fig{padding-right:8px;min-width:0} #agm-concept .pd-fig + .pd-fig{padding-left:12px} }