/* Shared editorial grid. Layout belongs here; typography lives in styles.css. */
:root {
  --grid-cols:12; --grid-margin:48px; --grid-gutter:32px;
  --grid-baseline:8px; --grid-leading:24px;
  --space-1:8px; --space-2:16px; --space-3:24px; --space-4:32px;
  --space-6:48px; --space-8:64px; --space-10:80px; --space-12:96px; --space-15:120px;
  --pad:var(--grid-margin);
}
.top,.index-heading,.igrid,.pcols,.pimgs,.iwrap,.pnav,.foot {
  display:grid; grid-template-columns:repeat(var(--grid-cols),minmax(0,1fr));
  column-gap:var(--grid-gutter);
}
.top {padding:32px var(--grid-margin) 0;align-items:start;row-gap:16px}
.top .brand {grid-column:1/7;justify-self:start}
.top .infolink {grid-column:10/-1;justify-self:end}
#app {padding-bottom:96px;min-height:100vh}
.index-heading {padding:88px var(--grid-margin) 32px;align-items:end;row-gap:16px}
.index-heading h1 {grid-column:1/10}
.index-count {grid-column:10/-1;justify-self:end}
.igrid {padding:0 var(--grid-margin);gap:80px var(--grid-gutter);align-items:start}
.igrid .item {grid-column:span 3;min-width:0}
.pwrap {padding:80px var(--grid-margin) 0}
.pcols {align-items:start;row-gap:64px}
.pcol-cred {grid-column:1/4;min-width:0}
.project-hero {grid-column:4/-1;margin:0}
.pcol-cred .pcred {margin-top:var(--project-credit-gap)}
.pintro-copy {display:grid;grid-template-columns:1fr;gap:32px;margin-top:64px}
.pimgs {padding:var(--space-12) var(--grid-margin) 0;row-gap:var(--project-media-gap)}
.pimgs .project-split-block {grid-column:1/-1;display:grid;grid-template-columns:repeat(var(--grid-cols),minmax(0,1fr));gap:24px var(--grid-gutter);align-items:start}
.project-split-text,.pimgs .project-text-block {grid-column:2/5;margin:0;max-width:40ch;min-width:0}
.project-split-media,.pimgs .imgblock {grid-column:5/-1;min-width:0}
.project-split-media {grid-template-columns:repeat(var(--split-media-count),minmax(0,1fr));gap:var(--grid-gutter)}
.pimgs .imgblock {width:var(--project-media-width);margin:0;padding:0}
.pnav {padding:96px var(--grid-margin) 0;align-items:start}
.pnav a:first-child {grid-column:1/7}
.pnav a:last-child {grid-column:7/-1;text-align:right;justify-self:end}
.iwrap {padding:80px var(--grid-margin) 0;row-gap:64px}
.info-heading {grid-column:1/-1}
.info-lead {grid-column:1/-1;display:grid;grid-template-columns:repeat(var(--grid-cols),minmax(0,1fr));gap:var(--grid-gutter);align-items:start}
.info-archive-link {grid-column:1/5;justify-self:start}
.info-lead .ist {grid-column:7/-1;display:block}
.info-lead .ist .cn {margin-top:80px}
.ist,.icols {grid-column:1/-1;display:grid;grid-template-columns:repeat(var(--grid-cols),minmax(0,1fr));gap:var(--grid-gutter);margin:0;max-width:none}
.ist .en {grid-column:1/7}
.ist .cn {grid-column:8/-1}
.ist .single-language {grid-column:1/-1}
.icols {margin-top:32px}
.icols>:first-child {grid-column:1/7}
.icols>:last-child {grid-column:8/-1}
.experience-section {grid-column:1/-1;display:grid;grid-template-columns:repeat(var(--grid-cols),minmax(0,1fr));gap:var(--grid-gutter);align-items:start}
.experience-section>h2 {grid-column:1/5}
.experience-list {grid-column:5/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--grid-gutter)}
.foot {position:relative;inset:auto;padding:32px var(--grid-margin);align-items:center;gap:16px var(--grid-gutter)}
.foot>#footL {grid-column:1/5;grid-row:1}
.foot>.fr {display:block;grid-column:5/9;grid-row:1;justify-self:start;text-align:left}
.foot>.gridbtn {grid-column:9/11;grid-row:1;justify-self:end}
.foot>.editbtn {grid-column:11/-1;grid-row:1;justify-self:end}
.gridbtn {align-self:center;font-family:var(--mono);font-weight:400;letter-spacing:.04em;border:1px solid var(--ink);padding:8px 12px;background:var(--paper)}
.gridbtn:hover,.gridbtn[aria-pressed="true"] {background:var(--ink);color:var(--paper)}
.grid-guides {position:fixed;inset:0;z-index:150;display:grid;grid-template-columns:repeat(var(--grid-cols),minmax(0,1fr));column-gap:var(--grid-gutter);padding-inline:var(--grid-margin);opacity:0;visibility:hidden;pointer-events:none;background-image:repeating-linear-gradient(to bottom,rgba(228,0,43,.1) 0,rgba(228,0,43,.1) 1px,transparent 1px,transparent var(--grid-baseline));transition:opacity .18s ease,visibility .18s ease}
.grid-guides::before,.grid-guides::after {content:"";position:fixed;top:0;bottom:0;width:1px;background:rgba(228,0,43,.72)}
.grid-guides::before {left:var(--grid-margin)}
.grid-guides::after {right:var(--grid-margin)}
.grid-guides span {min-width:0;border-inline:1px solid rgba(228,0,43,.34);background:rgba(228,0,43,.035)}
body.grid-on .grid-guides {opacity:1;visibility:visible}
@media(max-width:1200px){
  :root {--grid-margin:32px;--grid-gutter:24px}
}
@media(max-width:1000px){
  :root {--grid-cols:6;--grid-gutter:24px}
  .top .brand {grid-column:1/4}
  .top .infolink {grid-column:6/-1}
  .index-heading h1 {grid-column:1/5}
  .index-count {grid-column:5/-1}
  .igrid .item {grid-column:span 3}
  .pcol-cred {grid-column:1/3}
  .project-hero {grid-column:3/-1}
  .project-split-text,.pimgs .project-text-block {grid-column:2/4}
  .project-split-media,.pimgs .imgblock {grid-column:4/-1}
  .pnav a:first-child {grid-column:1/4}
  .pnav a:last-child {grid-column:4/-1}
  .ist .en,.icols>:first-child {grid-column:1/4}
  .ist .cn,.icols>:last-child {grid-column:4/-1}
  .info-archive-link {grid-column:1/3}
  .info-lead .ist {grid-column:3/-1}
  .experience-section>h2 {grid-column:1/3}
  .experience-list {grid-column:3/-1}
  .foot>#footL {grid-column:1/3}
  .foot>.fr {grid-column:3/5}
  .foot>.gridbtn {grid-column:5/6}
  .foot>.editbtn {grid-column:6/7}
  .grid-guides span:nth-child(n+7) {display:none}
}
/* An open desktop editor narrows the canvas; prevent compressed reading columns. */
@media(min-width:1001px){
  body.admin-open .pcol-cred,body.admin-open .project-hero {grid-column:1/-1}
  body.admin-open .project-split-text,body.admin-open .project-split-media {grid-column:1/-1;max-width:none}
  body.admin-open .foot>.fr {grid-column:1/9;grid-row:2}
}
@media(max-width:880px){
  .pcol-cred,.project-hero {grid-column:1/-1}
  .project-split-text,.pimgs .project-text-block,.project-split-media,.pimgs .imgblock {grid-column:1/-1}
  .project-split-text,.pimgs .project-text-block {margin-left:24px}
}
@media(max-width:720px){
  :root {--grid-cols:4;--grid-margin:24px;--grid-gutter:16px}
  .top {padding-top:24px}
  .top .brand {grid-column:1/4;grid-row:1}
  .top .infolink {grid-column:4/-1;grid-row:1}
  #app {padding-bottom:64px}
  .index-heading {padding-top:48px;padding-bottom:24px}
  .index-heading h1 {grid-column:1/-1}
  .index-count {grid-column:1/-1;justify-self:start}
  .igrid {row-gap:48px}
  .igrid .item {grid-column:1/-1}
  .pwrap,.iwrap {padding-top:48px}
  .pcols,.iwrap {row-gap:40px}
  .pcol-cred,.project-hero {grid-column:1/-1}
  .pintro-copy {gap:24px}
  .project-hero {margin:0}
  .pimgs {padding-top:56px;row-gap:56px}
  .project-split-text,.pimgs .project-text-block {grid-column:1/-1;max-width:none;margin:0 0 0 24px}
  .project-split-media,.pimgs .imgblock {grid-column:1/-1;max-width:none;margin:0}
  .project-split-media {grid-template-columns:1fr;gap:24px}
  .split-no-text .project-split-text:not([contenteditable]) {display:none}
  .pnav {padding-top:64px}
  .pnav a:first-child {grid-column:1/3}
  .pnav a:last-child {grid-column:3/-1}
  .ist,.icols {grid-template-columns:1fr;row-gap:32px}
  .ist .en,.ist .cn,.icols>:first-child,.icols>:last-child {grid-column:1/-1}
  .icols {margin-top:16px}
  .info-lead {row-gap:40px}
  .info-archive-link,.info-lead .ist,.experience-section>h2,.experience-list {grid-column:1/-1}
  .experience-list {grid-template-columns:1fr;row-gap:28px}
  .foot {row-gap:16px}
  .foot>#footL {grid-column:1/-1;grid-row:1}
  .foot>.fr {grid-column:1/-1;grid-row:2}
  .foot>.gridbtn {grid-column:1/3;grid-row:3;justify-self:start}
  .foot>.editbtn {grid-column:3/-1;grid-row:3}
  .grid-guides span:nth-child(n+5) {display:none}
}
@media(max-width:460px){
  :root {--grid-cols:2;--grid-margin:16px}
  .top .brand {grid-column:1/2}
  .top .infolink {grid-column:2/3}
  .pnav a:first-child {grid-column:1/2}
  .pnav a:last-child {grid-column:2/3}
  .foot>.gridbtn {grid-column:1/2}
  .foot>.editbtn {grid-column:2/3}
  .grid-guides span:nth-child(n+3) {display:none}
}

/* Archive and compact navigation: reference-led composition. */
.top{grid-template-columns:minmax(0,1fr) auto minmax(44px,1fr);padding:14px var(--grid-margin);column-gap:24px;align-items:center;border-bottom:1px solid var(--line);row-gap:0}
.top .brand{grid-column:1;grid-row:1;justify-self:start}
.top-nav{grid-column:2;grid-row:1;display:flex;align-items:center;justify-content:center;gap:24px;flex-wrap:wrap}
.top .top-nav a{align-self:center;justify-self:auto;margin:0}
.top-tools{grid-column:3;grid-row:1;justify-self:end;display:flex;align-items:center;gap:8px}
.theme-toggle{width:44px;height:44px;display:grid;place-items:center}
.home-intro{display:grid;grid-template-columns:repeat(var(--grid-cols),minmax(0,1fr));gap:64px var(--grid-gutter);padding:88px var(--grid-margin) 0}
.home-statement{grid-column:1/9}
.home-note{grid-column:10/-1;align-self:end}
.long-section{scroll-margin-top:72px}
.long-page .home-intro{padding-bottom:160px}
.long-page .works-section{border-top:1px solid var(--line);padding-bottom:160px}
.long-page .iwrap{border-top:1px solid var(--line);padding-bottom:64px}
.archive-intro{display:grid;grid-template-columns:repeat(var(--grid-cols),minmax(0,1fr));column-gap:var(--grid-gutter);padding:80px var(--grid-margin) 96px;align-items:start}
.archive-intro h1{grid-column:1/6}
.archive-intro>p{grid-column:6/9;margin-top:60px;max-width:22ch}
.archive-manage{grid-column:10/-1;justify-self:end;align-self:end}
.archive-list{padding:0 var(--grid-margin);display:grid;row-gap:32px}
.archive-row{display:grid;grid-template-columns:repeat(var(--grid-cols),minmax(0,1fr));column-gap:var(--grid-gutter)}
.archive-piece{grid-column:1/7;min-width:0;margin:0}
.archive-row[data-side="right"] .archive-piece{grid-column:7/-1}
.archive-image img{display:block;width:100%;height:auto}
.archive-piece figcaption{margin-top:18px}
.archive-controls{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:12px}
.archive-side-controls{display:flex;gap:4px}
.archive-placeholder{aspect-ratio:1;display:grid;place-items:center;border:1px dashed var(--ink-soft)}
@media(max-width:1000px){
  .home-statement{grid-column:1/5}.home-note{grid-column:5/-1}
  .archive-intro h1{grid-column:1/4}.archive-intro>p{grid-column:4/-1}.archive-manage{grid-column:4/-1;margin-top:24px;justify-self:start}
  .archive-piece{grid-column:1/4}.archive-row[data-side="right"] .archive-piece{grid-column:4/-1}
}
@media(min-width:1001px){
  body.admin-open .top{grid-template-columns:1fr auto}
  body.admin-open .top .brand{grid-column:1;grid-row:1}
  body.admin-open .top-nav{grid-column:1/-1;grid-row:2;justify-content:start}
  body.admin-open .top-tools{grid-column:2;grid-row:1}
}
@media(max-width:720px){
  .top{column-gap:12px;padding-block:10px;grid-template-columns:1fr auto}
  .top .brand{display:none}
  .top-nav{grid-column:1;grid-row:1;justify-content:start;gap:8px 18px}
  .top-tools{grid-column:2;grid-row:1}
  .home-intro{padding-top:48px;row-gap:32px}
  .home-statement,.home-note{grid-column:1/-1}
  .long-page .home-intro,.long-page .works-section{padding-bottom:88px}
  .archive-intro{padding-top:48px;padding-bottom:48px;row-gap:20px}
  .archive-intro h1,.archive-intro>p,.archive-manage{grid-column:1/-1;margin:0;justify-self:start}
  .archive-list{row-gap:32px}
  .archive-piece,.archive-row[data-side="right"] .archive-piece{grid-column:1/-1}
  .archive-piece figcaption{margin-top:12px}
}