/* Plain compositions, a growing atlas, ordinary work links, and native dialogs. */
:root { --field-dim: white; --field-rule: white; }
.field-mark { width: 20px; height: 20px; vertical-align: middle; }
body.field-page { font-size: 13px; }
.field-page a, .work-field-return { text-transform: lowercase; text-decoration: underline; }
.field-page :focus-visible { outline: 2px dotted currentColor; outline-offset: 5px; }
main.field-main { display: block; overflow: visible; }
.field-shell { width: 100%; }
.landing { position: relative; height: 100svh; min-height: 600px; overflow: hidden; --intervention: blue; --counter-color: yellow; }
.landing-name { position: absolute; z-index: 1; left: 2.5%; top: 2.5%; width: 62%; height: 44%; margin: 0; font-weight: 400; }
.landing-name a, .landing-name svg { display: block; width: 100%; height: 100%; }
.field-page .landing-name a { text-transform: uppercase; }
.landing-name text { fill: white; font-family: Arial, Helvetica, sans-serif; font-weight: 400; }
.landing-image { position: absolute; inset: 0 0 0 68.75%; }
.landing-image img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }
.landing-links a { position: absolute; z-index: 3; color: white; text-decoration: none; font-size: clamp(32px, 4.4vw, 88px); line-height: 1; white-space: nowrap; }
.landing-links a:hover { text-decoration: underline; }
.landing-links .landing-about { left: 26%; top: 75%; }
.landing-links .landing-projects { left: 26%; top: 85%; }
.landing-links .landing-network { left: 12.5%; top: 72%; font-size: clamp(55px, 6vw, 110px); }
.landing-links .landing-thoughts { left: 5%; top: 53%; }
.color-block { position: absolute; z-index: 2; pointer-events: none; }
.color-block-primary { background: var(--intervention); left: 53.5%; top: 51.5%; width: 25.5%; height: 38.5%; }
.color-block-secondary { background: var(--counter-color); display: none; }
.landing[data-color-layout="1"] .color-block-primary { left: 17.5%; top: 27%; width: 29%; height: 40%; }
.landing[data-color-layout="1"] .color-block-secondary { display: block; left: 64%; top: 84%; width: 33.5%; height: 9.5%; }
.landing[data-color-layout="2"] .color-block-primary { left: 62%; top: 17%; width: 36%; height: 12%; }
.landing[data-color-layout="2"] .color-block-secondary { display: block; left: 34%; top: 56%; width: 13%; height: 15%; }
.landing-palette { position: absolute; z-index: 4; bottom: 4%; left: 0; display: flex; gap: 5px; background: black; padding: 14px 15px; }
.landing-palette button { width: 25px; height: 25px; border: 1px solid white; border-radius: 0; background: var(--swatch); cursor: pointer; padding: 0; }
.landing-palette button[aria-pressed="true"] { outline: 1px solid white; outline-offset: 2px; }
.field-browser { color: white; background: black; border: 4px solid white; border-radius: 0; padding: 0 24px 24px; width: min(1000px, calc(100vw - 90px)); max-height: 80svh; overflow: auto; font: inherit; }
.field-browser::backdrop { background: black; }
.browser-bar { position: sticky; z-index: 5; top: 0; display: flex; justify-content: space-between; align-items: baseline; gap: 20px; background: blue; padding: 10px 12px; margin: 0 -24px 24px; }
.browser-bar button { border: 0; background: transparent; color: white; padding: 0; font: inherit; cursor: pointer; text-decoration: underline; }
.field-modes { display: flex; flex-wrap: wrap; gap: 20px; }
.field-modes a[aria-current="true"]::before { content: '> '; }
.field-network { display: none; }
.field-ready[data-view="network"] .field-network { display: block; }
.field-ready[data-view="network"] .field-index { display: none; }
/* Every work owns a grid cell. Uneven offsets stay inside it as the catalog grows. */
.map-caption { display: flex; gap: 20px; padding: 24px 20px; color: black; background: white; }
.field-map { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 70px 30px; padding: 35px 32px 70px; background: white; color: black; }
.field-page a.map-node { display: block; position: relative; color: black; text-decoration: none; width: 82%; min-width: 0; margin: 0; align-self: start; overflow-wrap: anywhere; }
.field-page a.map-node:hover, .field-page a.map-node:hover * { color: black !important; }
.field-map .map-node:nth-child(6n+2) { margin-top: 80px; justify-self: end; }
.field-map .map-node:nth-child(6n+3) { margin-top: 25px; width: 70%; }
.field-map .map-node:nth-child(6n+4) { margin-left: 12%; width: 72%; }
.field-map .map-node:nth-child(6n+5) { margin-top: 55px; }
.field-map .map-node:nth-child(6n) { margin-top: 95px; }
.map-token { display: block; position: relative; }
.map-token .field-mark { position: absolute; z-index: 1; top: -25px; left: 0; width: 25px; height: 25px; }
.map-preview { display: block; position: relative; z-index: 1; }
.map-token img { display: block; width: 100%; height: 125px; object-fit: contain; }
.map-text-number { display: block; font: 80px/.9 Arial, sans-serif; letter-spacing: -.1em; }
.map-block { position: absolute; background: blue; width: 35%; height: 38px; right: -8%; top: 45%; pointer-events: none; }
.field-map .map-node:nth-child(6n+2) .map-block { background: yellow; width: 115%; height: 25px; top: 28%; }
.field-map .map-node:nth-child(6n+3) .map-block { background: red; width: 26px; height: 75px; right: -4%; top: -8%; }
.field-map .map-node:nth-child(6n+4) .map-block { background: #00ff00; width: 32%; height: 45px; top: 8%; }
.field-map .map-node:nth-child(6n+5) .map-block { background: magenta; width: 28%; height: 60px; right: -5%; top: 35%; }
.field-map .map-node:nth-child(6n) .map-block { background: cyan; width: 100%; height: 32px; right: 20%; top: 20%; }
.map-title { display: block; margin-top: 12px; text-transform: lowercase; line-height: 1.4; }
.map-meta { display: block; font-size: 11px; margin-top: 8px; }
.map-node[data-selected] .map-title { background: yellow; }
.map-node:hover .map-title, .map-node:focus-visible .map-title { text-decoration: underline; }
.about-popup h2 { font-weight: normal; font-size: 24px; }
.about-popup .contact-text { font-size: 14px; line-height: 1.6; }
.about-email { display: block; width: 100%; max-width: 330px; height: auto; margin: 25px 0; }
.about-popup details { margin-top: 24px; }
.field-nojs { padding: 20px; }
.field-index { max-width: 880px; padding: 16px 0 24px; }
.index-heading { margin-bottom: 20px; }
.index-heading h2 { scroll-margin-top: 60px; font-size: 16px; font-weight: normal; margin: 0 0 12px; }
.index-heading nav { display: flex; gap: 20px; }
.index-heading a[aria-current="page"]::before { content: '> '; }
.field-index-list { list-style: none; padding: 0; margin: 0; }
.field-index-row { margin: 0 0 12px; }
.field-index-row:nth-child(4n+2) { margin-left: 11%; margin-bottom: 24px; }
.field-index-row:nth-child(5n) { margin-left: 26%; }
.field-index-row:nth-child(7n+1) .index-title { font-size: 28px; letter-spacing: -.06em; }
.index-number { margin-right: 12px; }
.index-number, .index-meta { color: var(--field-dim); font-size: 11px; }
.index-title { text-transform: uppercase; }
.index-meta { margin-left: 18px; }
.field-index-row > a { line-height: 1.7; }
.field-index-row[data-selected] .index-number { color: white; }
.field-elsewhere { display: flex; flex-wrap: wrap; gap: 12px 25px; margin-top: 18px; }
.field-nojs { line-height: 1.6; }
/* Square, off-center windows; native dialog keeps keyboard and focus behavior simple. */
.field-popup { color: white; background: black; border: 4px solid white; border-radius: 0; padding: 22px; width: min(420px, calc(100vw - 64px)); max-height: calc(100dvh - 80px); overflow: auto; font: inherit;  }
.field-popup::backdrop { background: black; }
.popup-close { display: block; margin: 0 0 24px auto; padding: 0; border: 0; color: white; background: black; cursor: pointer; text-decoration: underline; }
.popup-close:focus-visible { outline: 1px dotted white; outline-offset: 4px; }
/* Work pages share the same plain frame. Their media and poem bodies stay authored. */
body.field-work #nav { font-size: 13px; padding: 20px; box-sizing: border-box; display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 20px; translate: none; }
body.field-work #nav a { width: auto; text-transform: lowercase; text-decoration: underline; }
body.field-work #nav a:nth-child(2n) { transform: translateY(5px); }
body.field-work #main-heading { align-self: flex-start; width: 86%; font-size: 28px; letter-spacing: -.06em; font-weight: normal; margin: 25px 0 0 7%; text-align: left; box-sizing: border-box; }
body.field-work #subtitle { width: 70%; font-size: 12px; margin: 12px 15% 25px auto; text-align: right; }
body.field-work .project-copy, body.field-work .contact-text, .project-intro { font-size: 14px; line-height: 1.6; text-transform: lowercase; }
.project-intro { max-width: 65ch; margin: 0 auto 20px; padding: 0 20px; }
.project-account { width: min(850px, calc(100% - 40px)); margin: 20px auto; }
.project-account summary { cursor: pointer; font-size: 13px; }
.project-account .project-copy { margin-top: 15px; max-width: 100%; padding: 0; }
body.field-work .slideshow-wrapper { height: 65dvh; max-height: 650px; }
.work-field-return { display: block; align-self: flex-start; width: fit-content; font-size: 12px; margin: 35px 0 35px 7%; padding: 14px 20px; background: blue; color: white; }
@media (max-width: 600px) {
    .landing { min-height: 600px; }
    .landing-name { top: 2%; left: 4%; width: 92%; height: 29%; }
    .landing-image { inset: 32% 0 0 56%; }
    .landing-links a { font-size: clamp(24px, 7.5vw, 31px); }
    .landing-links .landing-about { left: 7%; top: 64%; }
    .landing-links .landing-projects { left: 7%; top: 73%; }
    .landing-links .landing-network { left: 27%; top: 51%; font-size: 62px; }
    .landing-links .landing-thoughts { left: 7%; top: 40%; }
    .color-block-primary { left: 46%; top: 45%; width: 39%; height: 16%; }
    .landing[data-color-layout="1"] .color-block-primary { left: 18%; top: 20%; width: 47%; height: 20%; }
    .landing[data-color-layout="1"] .color-block-secondary { left: 62%; top: 84%; width: 33%; height: 7%; }
    .landing[data-color-layout="2"] .color-block-primary { left: 65%; top: 38%; width: 32%; height: 8%; }
    .landing[data-color-layout="2"] .color-block-secondary { left: 40%; top: 54%; width: 13%; height: 7%; }
    .landing-palette { gap: 5px; padding: 12px; bottom: 3%; }
    .landing-palette button { width: 27px; height: 27px; }
    .field-browser { padding: 0 15px 20px; width: calc(100vw - 54px); max-height: 84svh; }
    .browser-bar { margin: 0 -15px 20px; padding: 10px; gap: 10px; font-size: 11px; }
    .field-modes { gap: 12px; }
    .field-map { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 30px 18px 60px; gap: 65px 24px; }
    .field-map .map-node:nth-child(n) { width: 85%; margin: 0; }
    .field-map .map-node:nth-child(2n) { margin-top: 65px; justify-self: end; }
    .map-token img { height: 95px; }
    .map-text-number { font-size: 60px; }
    .about-popup { margin: auto; max-height: calc(100svh - 60px); padding: 18px; }
    .index-meta { display: none; }
    .field-index-row:nth-child(5n) { margin-left: 13%; }
    body.field-work #nav { padding: 15px; gap: 15px; }
    body.field-work #nav a { flex: none; text-align: left; }
}