/* THE WALL v4 (11/1): every line of type on the wall is Laredo Light (Carson: one lineweight, only the size changes). one 8-column grid, one gutter between everything (the white border is the structure), square units.
   Pictures fill their cells. Words sit in the white cells, brown; or lie over a picture, chalk. Nothing behind type, nothing clipped. */
.wall-wrap { --g: 28px; --rail: 0px; --wallw: calc(100vw - 2 * var(--g)); padding: var(--g) var(--g) var(--g) var(--g); }   /* the page runs under the rail; the left gutter holds the rail, as before */
#wall { --cols: 8; --cellpx: calc((var(--wallw) - 7 * var(--g)) / 8); display: grid; grid-template-columns: repeat(var(--cols), 1fr); grid-auto-rows: var(--cellpx); gap: var(--g); }
.wt { position: relative; display: block; min-width: 0; min-height: 0; text-decoration: none; color: var(--ink); opacity: 0; transform: translateY(12px); transition: opacity .9s cubic-bezier(.16, 1, .3, 1), transform .9s cubic-bezier(.16, 1, .3, 1); }
.wt.in { opacity: 1; transform: none; }
/* pictures and film: edge to edge in their cells; the project name appears only on hover */
.wt-pic, .wt-film { overflow: hidden; background: #e9e4dc; }
.wt-pic img, .wt-film video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s cubic-bezier(.16, 1, .3, 1), filter .6s ease; }
.wt-pic.bw img { filter: grayscale(1) contrast(1.04); } .wt-pic.bw:hover img { filter: none; }
.wt-pic:hover img { transform: scale(1.025); }
.wt-pic span { display: none; position: absolute; left: 1rem; bottom: .9rem; color: var(--chalk); font-family: var(--font-nav); font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; opacity: 0; transition: opacity .4s ease; text-shadow: 0 1px 12px rgba(0,0,0,.35); }
.wt-pic:hover span { opacity: 0; }                                   /* 11/1: no words on pictures, not even on hover; the picture is the link */
.wt-pic.has-cap span { opacity: 0; font-size: .64rem; letter-spacing: .24em; }   /* the small subtle line that stays: a name, coordinates, a theory */
@font-face { font-family: 'Laredo Hair'; src: url('../fonts/Laredo-Hair.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
/* a void filled with type (Carson 11/1: all brown on chalk, the format and size of the text fills the space a picture would) */
.wt-tblock { margin: 0; font-family: var(--font-nav); font-weight: 400; font-size: var(--fs); line-height: var(--lh); letter-spacing: .08em; text-transform: uppercase; text-align: justify; text-align-last: left; color: var(--ink); overflow: hidden; hyphens: none; }
/* a word standing on end */
.wt-vword { display: flex; align-items: center; justify-content: center; overflow: hidden; }
.wt-vword b { writing-mode: vertical-rl; font-family: 'Laredo Hair', 'Laredo Thin', var(--font-nav); font-weight: 400; font-size: var(--fs); letter-spacing: .14em; line-height: 1; color: var(--ink); white-space: nowrap; }
/* joined pictures: the tile grows over the gutter so it touches its neighbour; object-fit crops it */
.wt-pic.jr, .wt-pic.jrb { margin-right: calc(-1 * var(--g)); } .wt-pic.jb, .wt-pic.jrb { margin-bottom: calc(-1 * var(--g)); }
.wt-pic.je { margin-right: calc(-14vw - var(--g)); }                                   /* runs off the right edge of the page */
.wall-wrap { overflow: hidden; }
/* model captures: no white, the drawing sits on the chalk (multiply), two lines of type run along the axonometric axes */
.wt-pic.model { background: none; overflow: hidden; }
.wt-pic.model img { object-fit: contain; mix-blend-mode: multiply; filter: none; transform: translateY(-9%) scale(1.18); }   /* the capture's own white margin is scaled out of the cell */
.wt-pic.model:hover img { transform: translateY(-9%) scale(1.18); }
.wt-pic.model .ax { display: none; position: absolute; bottom: 9%; font-family: var(--font-nav); font-style: normal; font-size: .58rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink); white-space: nowrap; opacity: .9; }
.wt-pic.model .ax-l { right: 50%; transform-origin: right center; transform: rotate(-30deg); padding-right: .6rem; }     /* the two lines meet at the model's front corner, parallel to its edges */
.wt-pic.model .ax-r { left: 50%; transform-origin: left center; transform: rotate(30deg); padding-left: .6rem; }
/* sketches sit on the paper */
.wt-ink { display: flex; align-items: center; justify-content: center; padding: 4%; }
.wt-ink img { max-width: 100%; max-height: 100%; mix-blend-mode: multiply; }
/* words: a run of letters at natural spacing, three weights of size; .right sits against the right edge; .ov lies over a picture in chalk */
.wt-word { display: flex; align-items: center; justify-content: space-between; flex-wrap: nowrap; line-height: 1; overflow: hidden; }   /* the letters spread to the cell's edges: the word is the width of the box */
.wt-word.right { justify-content: flex-end; }
.wt-word b { display: block; font-family: 'Laredo Hair', 'Laredo Thin', var(--font-nav); font-weight: 400; color: var(--ink); transition: color .4s ease; }
.wt-word b { font-size: var(--fs, calc(var(--cellpx) * .55)); }
.wt-word.ov { z-index: 2; pointer-events: none; padding: var(--g); align-items: flex-start; }
.wt-word.ov b { color: var(--chalk); text-shadow: 0 1px 24px rgba(0,0,0,.25); }
/* paragraphs, labels, numbers: in the white cells, brown */
.wt-para { margin: 0; padding: 0 0 .1rem; font-family: var(--font-nav); font-weight: 400; font-size: .9rem; letter-spacing: .1em; text-transform: uppercase; line-height: 1.75; display: flex; align-items: flex-end; max-width: 34ch; }
.wt-small { display: flex; align-items: flex-end; font-family: var(--font-nav); font-size: .95rem; letter-spacing: .16em; text-transform: uppercase; line-height: 1.2; }
/* coordinates: one project each, typed out when the tile arrives; a caret blinks while it types */
.wt-coord { display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: .35rem; text-decoration: none; color: var(--ink); overflow: hidden; }
.wt-coord b { font-family: var(--font-nav); font-weight: 400; font-size: clamp(.8rem, 1.1vw, 1.05rem); letter-spacing: .18em; white-space: nowrap; min-height: 1.2em; }
.wt-coord b:empty::after, .wt-coord.typing b::after { content: '_'; animation: wcaret .8s steps(1) infinite; }   /* a caret waits in the empty cell, then types */
@keyframes wcaret { 50% { opacity: 0; } }
.wt-coord i { font-family: var(--font-nav); font-style: normal; font-size: .62rem; letter-spacing: .22em; text-transform: uppercase; opacity: .75; }
.wt-coord.tall { justify-content: flex-start; } .wt-coord.tall b, .wt-coord.tall i { writing-mode: vertical-rl; }
.wt-num { display: flex; align-items: flex-start; font-family: var(--font-nav); font-weight: 400; font-size: .7rem; letter-spacing: .14em; }
@media (max-width: 1023px) { .wall-wrap { --g: 24px; --rail: 0px; } #wall { --cols: 4; --cellpx: calc((var(--wallw) - 3 * var(--g)) / 4); } }
@media (max-width: 760px) { .wt-pic.je, .wt-pic.jr, .wt-pic.jrb { margin-right: 0; } #wall { grid-auto-rows: calc(var(--cellpx) * .55); grid-auto-flow: row dense; } .wt-word.ov { display: none; } .wt-tblock { letter-spacing: .03em; } .wall-wrap { --g: 18px; --rail: 0px; } #wall { --cols: 2; --cellpx: calc((var(--wallw) - var(--g)) / 2); } .wt-para { font-size: .66rem; line-height: 1.6; } .wt-small { font-size: .78rem; } .wt-word.k3 b { font-size: calc(var(--cellpx) * .7); } .wt-vword b { writing-mode: horizontal-tb; font-size: min(var(--fs), calc(var(--cellpx) * .19)); letter-spacing: .12em; } }
/* 11/1 19:30 Carson: the Second Shore drawings are complete sheets; shown whole, scaled to fit, never cropped */
.wt-pic.whole img, .wt-pic.whole:hover img { object-fit: contain; mix-blend-mode: multiply; filter: none; transform: none; }
.wt-pic.whole { background: transparent; }
/* 11/1 21:29 Carson: on the phone the rail ran into the pictures. The wall now starts clear of the rail, with a clean channel for it */
@media (max-width: 760px) { .wall-wrap { padding-left: calc(var(--g0, 26px) + 12px); --wallw: calc(100vw - var(--g0, 26px) - 12px - var(--g)); } }
@media (max-width: 760px) { .wt-coord b { white-space: normal; font-size: .95em; line-height: 1.35; } }   /* 11/1 21:31: full coordinates on the phone, on two lines if needed */
@media (max-width: 760px) { .wt-coord i { font-size: .7rem; } }   /* 11/1 23:10 phone: place names at 11px */