/* THE PAGES (11/1/2026). Every inner page in the landing's manner: chalk, one 28px gutter, the 8-column grid of the wall, brown type only.
   Titles Laredo Regular, navigation and labels Laredo Light, the big numbers Laredo Hair, body IBM Plex Mono Light in caps. No rules,
   boxes, pills or shadows; the only line on the site is the underline of a form field. */
@font-face { font-family: 'Laredo'; src: url('../fonts/Laredo-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Laredo Light'; src: url('../fonts/Laredo-Light.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Laredo Hair'; src: url('../fonts/Laredo-Hair.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
:root { --ink: #5C3A18; --chalk: #F0EFEB; --sand: #D9CFC2; --g: 28px; --ft: 'Laredo', serif; --fn: 'Laredo Light', 'Laredo', serif; --fh: 'Laredo Hair', 'Laredo Light', serif; --fb: 'IBM Plex Mono', monospace; }
body.pg-body { margin: 0; background: var(--chalk); color: var(--ink); font-family: var(--fb); font-weight: 300; -webkit-font-smoothing: antialiased; }
main.pg { padding: calc(var(--g) * 2.5) var(--g) calc(var(--g) * 2) calc(var(--g) * 2); box-sizing: border-box; }
.pg * { box-sizing: border-box; }
.pg a { color: inherit; text-decoration: none; }
/* the grid: eight columns, one gutter, like the wall */
.pg-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: var(--g); align-items: start; margin-bottom: calc(var(--g) * 2); }
.pg-grid > * { min-width: 0; }
.c1-3 { grid-column: 1 / 3; } .c1-4 { grid-column: 1 / 4; } .c1-5 { grid-column: 1 / 5; } .c1-6 { grid-column: 1 / 6; } .c1-7 { grid-column: 1 / 7; } .c1-9 { grid-column: 1 / 9; }
.c3-5 { grid-column: 3 / 5; } .c3-7 { grid-column: 3 / 7; } .c3-8 { grid-column: 3 / 8; } .c3-9 { grid-column: 3 / 9; } .c4-7 { grid-column: 4 / 7; } .c4-9 { grid-column: 4 / 9; } .c5-7 { grid-column: 5 / 7; } .c5-9 { grid-column: 5 / 9; } .c6-9 { grid-column: 6 / 9; } .c7-9 { grid-column: 7 / 9; }
/* type */
.pg-kicker { font-family: var(--fn); font-size: .72rem; letter-spacing: .26em; text-transform: uppercase; margin: 0 0 1rem; }
.pg-title { font-family: var(--ft); font-weight: 400; font-size: clamp(2rem, 4.6vw, 4.2rem); letter-spacing: .14em; text-transform: uppercase; line-height: 1; margin: 0 0 1.4rem; }
.pg-big { font-family: var(--fh); font-weight: 400; font-size: clamp(3.2rem, 9vw, 9rem); letter-spacing: .06em; line-height: .95; margin: 0; }
.pg-h { font-family: var(--fn); font-weight: 400; font-size: clamp(1.1rem, 1.8vw, 1.5rem); letter-spacing: .2em; text-transform: uppercase; margin: 0 0 .8rem; line-height: 1.2; }
.pg-text { font-family: var(--fb); font-weight: 300; font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; line-height: 1.8; margin: 0; max-width: 48ch; }
.pg-text + .pg-text { margin-top: 1rem; }
.pg-small { font-family: var(--fn); font-size: .66rem; letter-spacing: .22em; text-transform: uppercase; opacity: .75; margin: 0; }
.pg-link { font-family: var(--fn); font-size: .72rem; letter-spacing: .24em; text-transform: uppercase; display: inline-block; margin-top: 1rem; }
.pg-link::after { content: " \2192"; }
.pg-link:hover { opacity: .7; }
/* pictures sit in cells, edge to edge, no words */
.pg-pic { display: block; width: 100%; aspect-ratio: 3 / 2; overflow: hidden; background: var(--sand); }
.pg-pic.tall { aspect-ratio: 2 / 3; } .pg-pic.wide { aspect-ratio: 21 / 9; }
.pg-pic img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s cubic-bezier(.16, 1, .3, 1); }
.pg-pic:hover img { transform: scale(1.025); }
/* rows: a numbered or named line with one sentence, the format of a drawing list */
.pg-rows { list-style: none; margin: 0; padding: 0; }
.pg-rows li { display: grid; grid-template-columns: 3.2rem 1fr; gap: var(--g); padding: 1.1rem 0; align-items: baseline; }
.pg-rows li > i { font-family: var(--fn); font-style: normal; font-size: .72rem; letter-spacing: .2em; }
.pg-rows li > div > .pg-h { margin-bottom: .4rem; }
.pg-rows.named li { grid-template-columns: minmax(10rem, 1fr) 2fr; }
/* forms: hairline underline only */
.pg form { display: block; }
.pg .field { margin-bottom: 1.6rem; }
.pg label { display: block; font-family: var(--fn); font-size: .66rem; letter-spacing: .24em; text-transform: uppercase; margin-bottom: .4rem; }
.pg input, .pg select, .pg textarea { width: 100%; border: 0; border-bottom: 1px solid var(--ink); border-radius: 0; background: none; color: var(--ink); font-family: var(--fb); font-weight: 300; font-size: .9rem; padding: .5rem 0; outline: 0; -webkit-appearance: none; appearance: none; }
.pg textarea { min-height: 7rem; resize: vertical; }
.pg select { background-image: none; }
.pg .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--g); }
.pg button, .pg .pg-btn { background: none; border: 0; padding: 0; color: var(--ink); font-family: var(--fn); font-size: .76rem; letter-spacing: .26em; text-transform: uppercase; cursor: pointer; margin-top: .4rem; }
.pg button::after, .pg .pg-btn::after { content: " \2192"; }
.pg .hp-field, .pg .hp { display: none; }
/* the foot of every page */
.pg-foot { margin-top: calc(var(--g) * 3); padding-top: var(--g); display: grid; grid-template-columns: repeat(8, 1fr); gap: var(--g); font-family: var(--fn); font-size: .66rem; letter-spacing: .22em; text-transform: uppercase; }
.pg-foot nav { grid-column: 1 / 6; display: flex; flex-wrap: wrap; gap: .6rem 1.8rem; }
.pg-foot .pg-foot-social { grid-column: 6 / 9; display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; justify-content: flex-end; }
.pg-foot p { grid-column: 1 / 9; margin: 1.2rem 0 0; font-family: var(--fb); font-weight: 300; font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; opacity: .7; }
.pg-foot a:hover { opacity: .7; }
@media (max-width: 1023px) { :root { --g: 24px; } }
@media (max-width: 760px) { :root { --g: 18px; } main.pg { padding: calc(var(--g) * 3) var(--g) calc(var(--g) * 2) calc(var(--g) * 2); } .pg-grid { grid-template-columns: repeat(2, 1fr); } .pg-grid > * { grid-column: 1 / 3; } .pg-grid > .half { grid-column: span 1; } .pg .form-row { grid-template-columns: 1fr; } .pg-rows li { grid-template-columns: 2.2rem 1fr; } .pg-rows.named li { grid-template-columns: 1fr; gap: .3rem; } .pg-foot nav, .pg-foot .pg-foot-social { grid-column: 1 / 3; justify-content: flex-start; } .pg-foot p { grid-column: 1 / 3; } }

/* PROJECT PAGES in the same manner (overrides on the generated markup; the generator is unchanged for now) */
body.ls main.proj { padding: 0 0 var(--g); }
body.ls main.proj .proj-hero { height: 100vh; height: 100dvh; margin: 0; }
body.ls main.proj .proj-hero-cap { left: calc(var(--g) * 2); right: var(--g); bottom: var(--g); }
body.ls main.proj .proj-hero-cap h1 { font-family: var(--ft); letter-spacing: .14em; }
body.ls main.proj .proj-hero-cap i { font-family: var(--fn); font-weight: 400; letter-spacing: .24em; opacity: 1; }
body.ls main.proj .page-head, body.ls main.proj .proj-head { text-align: left; max-width: none; margin: 0; padding: calc(var(--g) * 2) var(--g) 0 calc(var(--g) * 2); }
body.ls main.proj .page-head .eyebrow { font-family: var(--fn); font-size: .72rem; letter-spacing: .26em; text-transform: uppercase; margin: 0 0 1rem; display: block; color: var(--ink); }
body.ls main.proj .page-head-rule { display: none; }
body.ls main.proj .page-head-sub { margin: 0; max-width: 40ch; font-family: var(--fn); font-weight: 400; font-size: clamp(1.1rem, 1.9vw, 1.6rem); letter-spacing: .14em; text-transform: uppercase; line-height: 1.35; color: var(--ink); }
body.ls main.proj .proj-meta { display: grid; grid-template-columns: repeat(8, 1fr); gap: var(--g); padding: calc(var(--g) * 1.5) var(--g) 0 calc(var(--g) * 2); margin: 0; max-width: none; border: 0; align-items: start; }
body.ls main.proj .proj-fact { grid-column: span 1; text-align: left; padding: 0; border: 0; font-family: var(--fb); font-weight: 300; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; line-height: 1.6; color: var(--ink); }
body.ls main.proj .proj-fact b { display: block; font-family: var(--fn); font-weight: 400; font-size: .66rem; letter-spacing: .24em; margin-bottom: .4rem; }
body.ls main.proj .proj-outline { grid-column: 5 / 7; grid-row: 1; justify-self: start; max-width: 240px; opacity: .9; margin-top: -1.2rem; }   /* the state sits beside the facts, in the void Carson circled (11/1) */
body.ls main.proj .proj-outline svg { width: 100%; height: auto; }
body.ls main.proj .proj-intent { text-align: left; padding: calc(var(--g) * 2) var(--g) 0 calc(var(--g) * 2); margin: 0; max-width: none; }
body.ls main.proj .proj-intent .eyebrow { font-family: var(--fn); font-size: .72rem; letter-spacing: .26em; text-transform: uppercase; display: block; margin-bottom: 1rem; color: var(--ink); }
body.ls main.proj .proj-para { margin: 0; max-width: 52ch; font-family: var(--fb); font-weight: 300; font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; line-height: 1.8; color: var(--ink); }
body.ls main.proj .section:not(.proj-intent) { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--g); padding: calc(var(--g) * 2) var(--g) 0 calc(var(--g) * 2); margin: 0; max-width: none; text-align: left; }
body.ls main.proj .proj-essay { margin: 0; padding: 0; border: 0; text-align: left; max-width: none; }
body.ls main.proj .proj-essay .eyebrow { font-family: var(--fn); font-size: .72rem; letter-spacing: .26em; text-transform: uppercase; display: block; margin-bottom: .8rem; color: var(--ink); }
body.ls main.proj .proj-essay p { margin: 0; max-width: 48ch; font-family: var(--fb); font-weight: 300; font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; line-height: 1.8; color: var(--ink); }
body.ls main.proj .proj-wide { margin: calc(var(--g) * 2) var(--g) 0 var(--g); max-width: none; padding: 0; }
body.ls main.proj .proj-wide.is-bleed { margin-right: 0; }
body.ls main.proj .proj-wide img { width: 100%; height: auto; display: block; }
body.ls main.proj .proj-chapter { display: grid; grid-template-columns: 5fr 3fr; gap: var(--g); padding: calc(var(--g) * 2) var(--g) 0 var(--g); margin: 0; max-width: none; align-items: end; }
body.ls main.proj .proj-chapter-flip { grid-template-columns: 3fr 5fr; } body.ls main.proj .proj-chapter-flip .proj-chapter-img { order: 2; }
body.ls main.proj .proj-chapter-img { margin: 0; } body.ls main.proj .proj-chapter-img img { width: 100%; height: auto; display: block; }
body.ls main.proj .proj-chapter-text { padding: 0 0 0 var(--g); text-align: left; }
body.ls main.proj .proj-chapter-text .eyebrow { font-family: var(--fn); font-size: .72rem; letter-spacing: .26em; text-transform: uppercase; display: block; margin-bottom: .8rem; color: var(--ink); }
body.ls main.proj .proj-chapter-text h2 { font-family: var(--fn); font-weight: 400; font-size: clamp(1.1rem, 1.9vw, 1.6rem); letter-spacing: .18em; text-transform: uppercase; margin: 0; line-height: 1.25; color: var(--ink); }
body.ls main.proj .proj-sketch { display: grid; grid-template-columns: 5fr 3fr; gap: var(--g); padding: calc(var(--g) * 2) var(--g) 0 var(--g); margin: 0; max-width: none; }
body.ls main.proj .proj-sketch-img { margin: 0; padding: 0; background: none; } body.ls main.proj .proj-sketch-img img { width: 100%; height: auto; mix-blend-mode: multiply; }
body.ls main.proj .proj-next { padding: calc(var(--g) * 3) var(--g) 0 calc(var(--g) * 2); margin: 0; max-width: none; text-align: left; cursor: auto; }
body.ls main.proj .proj-next-head { font-family: var(--fn); letter-spacing: .2em; text-transform: uppercase; color: var(--ink); }
body.ls main.proj .proj-next-head small { display: block; font-size: .66rem; letter-spacing: .26em; margin-bottom: .6rem; }
body.ls main.proj .proj-next-head b { display: block; font-family: var(--ft); font-weight: 400; font-size: clamp(1.4rem, 3vw, 2.4rem); letter-spacing: .14em; }
body.ls main.proj .proj-next-head i { display: block; font-style: normal; font-size: .66rem; margin-top: .5rem; opacity: .8; }
body.ls main.proj .proj-next-main { display: block; margin: var(--g) 0 0; max-width: 60%; cursor: pointer; }
body.ls main.proj .proj-next-main img { width: 100%; height: auto; display: block; }
body.ls main.proj .proj-next-links { display: flex; gap: 2rem; margin-top: var(--g); font-family: var(--fn); font-size: .7rem; letter-spacing: .24em; text-transform: uppercase; }
body.ls main.proj .proj-next-links a { color: var(--ink); text-decoration: none; }
body.ls main.proj .cta-band { padding: calc(var(--g) * 3) var(--g) 0 calc(var(--g) * 2); margin: 0; max-width: none; text-align: left; background: none; border: 0; }
body.ls main.proj .cta-band h2 { font-family: var(--ft); font-weight: 400; font-size: clamp(1.6rem, 3.4vw, 3rem); letter-spacing: .14em; text-transform: uppercase; margin: 0 0 1rem; color: var(--ink); }
body.ls main.proj .cta-band p { margin: 0 0 1rem; max-width: 48ch; font-family: var(--fb); font-weight: 300; font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; line-height: 1.8; color: var(--ink); }
body.ls main.proj .cta-band .btn { font-family: var(--fn); font-size: .72rem; letter-spacing: .24em; text-transform: uppercase; color: var(--ink); }
/* the old footer, in the new manner */
body.ls .footer { margin: calc(var(--g) * 3) 0 0; padding: var(--g) var(--g) var(--g) calc(var(--g) * 2); background: none; border: 0; color: var(--ink); display: grid; grid-template-columns: 1fr auto; gap: var(--g); align-items: start; text-align: left; }
body.ls .footer-lockup { display: none; }
body.ls .footer-links { display: flex; flex-wrap: wrap; gap: .6rem 1.8rem; font-family: var(--fn); font-size: .66rem; letter-spacing: .22em; text-transform: uppercase; }
body.ls .footer-links a { color: var(--ink); text-decoration: none; }
body.ls .footer-social { display: flex; gap: 1rem; justify-self: end; } body.ls .footer-social a { color: var(--ink); width: 16px; height: 16px; display: block; } body.ls .footer-social svg { width: 16px; height: 16px; }
body.ls .footer-copy, body.ls .footer-credit { grid-column: 1 / 3; margin: .6rem 0 0; font-family: var(--fb); font-weight: 300; font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; opacity: .7; color: var(--ink); }
body.ls .footer-credit a, body.ls .footer-copy a { color: var(--ink); }
@media (max-width: 760px) { body.ls main.proj .proj-meta { grid-template-columns: repeat(2, 1fr); } body.ls main.proj .proj-outline { grid-column: 1 / 3; grid-row: auto; justify-self: start; } body.ls main.proj .section:not(.proj-intent), body.ls main.proj .proj-chapter, body.ls main.proj .proj-chapter-flip, body.ls main.proj .proj-sketch { grid-template-columns: 1fr; } body.ls main.proj .proj-chapter-flip .proj-chapter-img { order: 0; } body.ls main.proj .proj-chapter-text { padding: 0; } body.ls main.proj .proj-next-main { max-width: 100%; } body.ls .footer { grid-template-columns: 1fr; } body.ls .footer-social { justify-self: start; } body.ls .footer-copy, body.ls .footer-credit { grid-column: 1; } }

/* THE SERVICES WALL (11/1 night). Each service is a module of the home wall: the word in the hairline cut, a picture from a real project, two lines, and the
   coordinates of a built example typing in. Same 8 columns, same gutter, square units; four columns on a tablet, two on a phone. */
.sv { --cell: calc((100vw - 10 * var(--g)) / 8); display: grid; grid-template-columns: repeat(8, 1fr); grid-auto-rows: var(--cell); grid-auto-flow: row dense; gap: var(--g); margin: 0 0 calc(var(--g) * 2); }
.sv .t { position: relative; min-width: 0; min-height: 0; overflow: hidden; 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); }
.sv .t.in { opacity: 1; transform: none; }
.sv .t-word { grid-column: span 4; display: flex; align-items: center; justify-content: space-between; line-height: 1; }
.sv .t-word b { display: block; font-family: var(--fh); font-weight: 400; font-size: calc(var(--cell) * .6); }
.sv .t-pic { grid-column: span 4; grid-row: span 2; background: var(--sand); }
.sv .t-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s cubic-bezier(.16, 1, .3, 1); }
.sv .t-pic:hover img { transform: scale(1.025); }
.sv .t-lines { grid-column: span 3; display: flex; flex-direction: column; justify-content: flex-end; gap: .3rem; }
.sv .t-lines i { font-family: var(--fn); font-style: normal; font-size: .6rem; letter-spacing: .26em; text-transform: uppercase; margin-bottom: .3rem; }
.sv .t-lines p { margin: 0; font-family: var(--fn); font-weight: 400; font-size: clamp(.74rem, .9vw, .9rem); letter-spacing: .08em; text-transform: uppercase; line-height: 1.5; max-width: 44ch; }
.sv .t-coord { grid-column: span 1; overflow: visible; display: flex; flex-direction: column; justify-content: flex-end; gap: .35rem; }
.sv .t-coord b { font-family: var(--fn); font-weight: 400; font-size: clamp(.7rem, .82vw, .84rem); letter-spacing: .08em; white-space: nowrap; min-height: 1.2em; }
.sv .t-coord b:empty::after, .sv .t-coord.typing b::after { content: '_'; animation: svcaret .8s steps(1) infinite; }
@keyframes svcaret { 50% { opacity: 0; } }
.sv .t-coord i { font-family: var(--fn); font-style: normal; font-size: .6rem; letter-spacing: .22em; text-transform: uppercase; opacity: .8; }
@media (max-width: 1023px) { .sv { --cell: calc((100vw - 6 * var(--g)) / 4); grid-template-columns: repeat(4, 1fr); } .sv .t-lines { grid-row: span 2; } .sv .t-coord b { font-size: .72rem; letter-spacing: .1em; } }
@media (max-width: 760px) { .sv { --cell: calc((100vw - 4 * var(--g)) / 2); grid-template-columns: repeat(2, 1fr); grid-auto-rows: calc(var(--cell) * .55); } .sv .t-word { grid-column: span 2; } .sv .t-pic { grid-column: span 2; grid-row: span 4; } .sv .t-lines { grid-column: span 2; grid-row: span 2; } .sv .t-coord { grid-column: span 2; } .sv .t-lines p { font-size: .66rem; line-height: 1.6; } }

/* the social links are the apps' marks, not words (Carson 11/1 03:50) */
.pg-foot-social a { display: inline-block; width: 18px; height: 18px; opacity: .85; transition: opacity .3s ease; }
.pg-foot-social a:hover { opacity: 1; }
.pg-foot-social svg { width: 18px; height: 18px; display: block; fill: var(--ink); }

/* THE PRINT PAGES (11/1 night, Carson: "re design the prints pages"). shop/*.html brought into the page system: the picture at the gutter in the
   first five columns, the facts and the order in the last three; finish and size as hairline rows, no boxes, no fills; the inquiry form below. */
main.pg.print .print-wrap { display: grid; grid-template-columns: repeat(8, 1fr); gap: var(--g); padding: 0 !important; margin: 0 0 calc(var(--g) * 2); align-items: start; max-width: none; }
main.pg.print .print-gallery { grid-column: 1 / 6; }
main.pg.print .print-info { grid-column: 6 / 9; }
main.pg.print .print-gallery figure { position: relative; margin: 0; aspect-ratio: 4 / 5; overflow: hidden; background: var(--sand); cursor: pointer; }
main.pg.print .print-gallery figure img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
main.pg.print .print-nav, main.pg.print .print-count { display: none; }
main.pg.print .print-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--g); margin-top: var(--g); }
main.pg.print .print-thumbs button { padding: 0; margin: 0; border: 0; background: var(--sand); aspect-ratio: 4 / 5; overflow: hidden; cursor: pointer; opacity: .55; transition: opacity .4s ease; }
main.pg.print .print-thumbs button[aria-current="true"], main.pg.print .print-thumbs button:hover { opacity: 1; }
main.pg.print .print-thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
main.pg.print .print-info .eyebrow { display: block; font-family: var(--fn); font-size: .66rem; letter-spacing: .3em; text-transform: uppercase; margin: 0 0 .6rem; }
main.pg.print .print-info .print-meta { margin: 0 0 .4rem !important; font-family: var(--fn); font-size: .66rem; letter-spacing: .22em; text-transform: uppercase; opacity: .8; }
main.pg.print .print-info .print-meta a { text-decoration: underline; text-underline-offset: .25em; }
main.pg.print .print-info h1 { font-family: var(--ft); font-weight: 400; font-size: clamp(1.6rem, 2.6vw, 2.4rem); letter-spacing: .16em; text-transform: uppercase; line-height: 1; margin: .8rem 0 .8rem; }
main.pg.print .print-info > p { margin: 0 0 1.6rem; font-family: var(--fb); font-weight: 300; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; line-height: 1.8; max-width: 42ch; }
main.pg.print .print-form { margin: 0 0 1.4rem; }
main.pg.print fieldset { border: 0; padding: 0; margin: 0 0 1.6rem; min-width: 0; }
main.pg.print legend { padding: 0; margin: 0 0 .4rem; font-family: var(--fn); font-size: .62rem; letter-spacing: .3em; text-transform: uppercase; }
main.pg.print .print-size { position: relative; display: grid; grid-template-columns: 1.1rem minmax(0, 1fr) auto; column-gap: .6rem; align-items: baseline; padding: .7rem 0; border-bottom: 1px solid rgba(92, 58, 24, .28); cursor: pointer; }
main.pg.print .print-size input { position: absolute; opacity: 0; width: 0; height: 0; }
main.pg.print .print-size::before { content: ""; grid-column: 1; align-self: center; width: .5rem; height: .5rem; border: 1px solid var(--ink); border-radius: 50%; }
main.pg.print .print-size:has(input:checked)::before { background: var(--ink); }
main.pg.print .print-size b { grid-column: 2; font-family: var(--fn); font-weight: 400; font-size: .82rem; letter-spacing: .18em; text-transform: uppercase; }
main.pg.print .print-size em { grid-column: 3; grid-row: 1; font-style: normal; font-family: var(--fn); font-size: .82rem; letter-spacing: .14em; }
main.pg.print .print-size span { grid-column: 2 / 4; font-family: var(--fb); font-weight: 300; font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; line-height: 1.6; opacity: .8; margin-top: .15rem; }
main.pg.print .print-cta { margin: 0 0 1.6rem; display: flex; flex-direction: column; gap: .6rem; align-items: flex-start; }
main.pg.print .print-cta .pill { background: none; border: 0; border-radius: 0; padding: 0; color: var(--ink); font-family: var(--fn); font-size: .78rem; letter-spacing: .26em; text-transform: uppercase; text-decoration: none; display: inline-flex; gap: .5rem; }
main.pg.print .print-cta .pill i { font-style: normal; }
main.pg.print .print-cta .email-link { font-family: var(--fb); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; opacity: .8; }
main.pg.print .print-details { list-style: none; margin: 0 0 1.6rem; padding: 0; font-family: var(--fb); font-weight: 300; font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; line-height: 1.9; opacity: .8; }
main.pg.print .print-back { font-family: var(--fn); font-size: .66rem; letter-spacing: .26em; text-transform: uppercase; display: inline-block; margin: 0 0 .5rem; }
main.pg.print .print-inquiry { display: grid; grid-template-columns: repeat(8, 1fr); gap: var(--g); padding: 0; margin: 0; max-width: none; }
main.pg.print .print-inquiry > * { grid-column: 1 / 6; }
main.pg.print .print-inquiry .eyebrow { font-family: var(--fn); font-size: .66rem; letter-spacing: .3em; text-transform: uppercase; }
main.pg.print .print-inquiry h2 { font-family: var(--ft) !important; font-weight: 400; letter-spacing: .16em; text-transform: uppercase; font-size: clamp(1.2rem, 2vw, 1.6rem) !important; margin: .4rem 0 1.2rem !important; }
main.pg.print .print-inquiry .start-form button, main.pg.print .print-inquiry .start-form .pill { background: none; border: 0; border-radius: 0; padding: 0; color: var(--ink); font-family: var(--fn); font-size: .78rem; letter-spacing: .26em; text-transform: uppercase; cursor: pointer; }
@media (max-width: 1023px) { main.pg.print .print-gallery { grid-column: 1 / 5; } main.pg.print .print-info { grid-column: 5 / 9; } }
@media (max-width: 760px) { main.pg.print .print-wrap, main.pg.print .print-inquiry { grid-template-columns: 1fr; } main.pg.print .print-gallery, main.pg.print .print-info, main.pg.print .print-inquiry > * { grid-column: 1 / 2; } }

/* THE RECORD as a checkerboard (11/1, Carson): pictures and quotes alternate in 2x2 squares; each quote types in when its square arrives and
   signs off with a first name. On a phone the squares are one column wide. */
.sv.ck .t-pic { grid-column: span 2; grid-row: span 2; }
.sv.ck .t-quote { grid-column: span 2; grid-row: span 2; display: flex; flex-direction: column; justify-content: flex-end; gap: .8rem; padding: 0 4% 2% 0; }
.sv.ck .t-quote p { margin: 0; font-family: var(--fn); font-weight: 400; font-size: clamp(.9rem, 1.25vw, 1.25rem); letter-spacing: .08em; text-transform: uppercase; line-height: 1.5; min-height: 1.5em; }
.sv.ck .t-quote.typing p::after, .sv.ck .t-quote p:empty::after { content: '_'; animation: svcaret .8s steps(1) infinite; }
.sv.ck .t-quote i { font-family: var(--fn); font-style: normal; font-size: .66rem; letter-spacing: .3em; text-transform: uppercase; opacity: 0; transition: opacity .8s ease; }
.sv.ck .t-quote i::before { content: '- '; }
.sv.ck .t-quote.done i { opacity: .85; }
@media (max-width: 760px) { .sv.ck .t-pic { grid-column: span 1; grid-row: span 2; } .sv.ck .t-quote { grid-column: span 1; grid-row: span 2; padding: 0 2% 2% 0; } .sv.ck .t-quote p { font-size: .66rem; letter-spacing: .05em; line-height: 1.5; } }

/* the forms' spam trap (Netlify honeypot) is never shown */
.pg .hp-field, .pg p.hp-field, .pg p:has(input[name=bot-field]), .pg [name=bot-field] { display: none !important; }
/* the one footer on pages that are not built by pages_build (portfolio, projects, legal, the old landers) */
.pg-foot { box-sizing: border-box; width: 100%; max-width: 100%; padding-left: calc(var(--g) * 2); padding-right: var(--g); padding-bottom: calc(var(--g) * 2); overflow: hidden; } main.pg .pg-foot { padding-left: 0; padding-right: 0; padding-bottom: 0; }
.pg-foot * { box-sizing: border-box; } .pg-foot a { color: inherit; text-decoration: none; }

/* THE PORTFOLIO PAGE on phones (11/1 15:25): no words on pictures (the hover captions were showing on touch screens), the filter row wraps,
   the title sits where the other pages put it */
.pf-tile .pf-cap, .pf-tile .pf-coord { display: none !important; }
.pf-filters { display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; overflow: visible; }
@media (max-width: 760px) { .pf-filters { gap: .5rem 1rem; } .pf-filters button, .pf-filters a { font-size: .62rem; letter-spacing: .18em; padding: .2rem 0; } body.ls main:not(.proj):not(.pg) .page-title, body.ls .pf-head { padding-top: 0; margin-top: 0; } body.ls main:not(.proj):not(.pg) { padding-top: calc(var(--g0) * 2.5); } }
/* project pages on phones: the hero pictures stay inside the screen */
@media (max-width: 760px) { body.ls main.proj img, body.ls main.proj .proj-hero, body.ls main.proj figure { max-width: 100%; box-sizing: border-box; } body.ls main.proj .proj-gallery img, body.ls main.proj .proj-pics img { width: 100%; height: auto; } }

/* /links (11/1 15:50, rebuilt 15:55 after Carson's example): the mark, the name, one line, the social marks, picture cards, then plain rows */
.lk-page { max-width: 560px; margin: 0 auto; padding: 2rem 0 3rem; text-align: center; }
.lk-mark { width: 54px; height: auto; display: block; margin: 0 auto 1.2rem; }
.lk-title { font-family: 'Laredo', serif; font-weight: 400; font-size: 1.3rem; letter-spacing: .22em; text-transform: uppercase; margin: 0 0 .6rem; }
.lk-line { font-family: 'Laredo Light', 'Laredo', serif; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; opacity: .75; margin: 0 auto 1.2rem; max-width: 34ch; line-height: 1.7; }
.lk-social { display: flex; justify-content: center; gap: 1.4rem; margin: 0 0 2.2rem; } .lk-social a { color: var(--leather); display: inline-flex; } .lk-social svg { width: 18px; height: 18px; fill: currentColor; }
.lk-cards { display: grid; gap: 1.6rem; margin-bottom: 1.8rem; }
.lk-card { display: block; text-decoration: none; color: var(--ink); text-align: left; }
.lk-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; background: var(--sand); transition: transform .9s cubic-bezier(.16, 1, .3, 1); }
.lk-card:hover img { transform: scale(1.01); }
.lk-card .lk-n { display: block; margin-top: .7rem; font-family: 'Laredo', serif; font-size: 1.05rem; letter-spacing: .16em; text-transform: uppercase; }
.lk-card .lk-d { display: block; margin-top: .2rem; font-family: 'Laredo Light', 'Laredo', serif; font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; opacity: .7; }
.lk { display: block; text-align: left; }
.lk-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: .6rem 2rem; align-items: baseline; padding: 1.05rem 0; border-top: 1px solid rgba(92, 58, 24, .22); text-decoration: none; color: var(--ink); }
.lk-row:last-child { border-bottom: 1px solid rgba(92, 58, 24, .22); }
.lk-row .lk-n { font-family: 'Laredo', serif; font-size: 1.05rem; letter-spacing: .16em; text-transform: uppercase; }
.lk-row .lk-d { font-family: 'Laredo Light', 'Laredo', serif; font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; opacity: .7; line-height: 1.6; }
.lk-row:hover .lk-d { opacity: 1; }
@media (max-width: 760px) { .lk-row { grid-template-columns: 1fr; gap: .25rem; } .lk-page { padding-top: .5rem; } }

.form-privacy { margin-top: 1rem; font-family: 'Laredo Light', 'Laredo', serif; font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; opacity: .7; } .form-privacy a { color: inherit; }

/* careers (11/1 16:25): a row of three pictures, a sketch, a frame, a garden, under the intro */
.pg-three { grid-template-columns: repeat(3, 1fr); } .pg-three > div { grid-column: auto; }
.pg-three .pg-pic img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; height: auto; display: block; }
@media (max-width: 760px) { .pg-three { grid-template-columns: 1fr; } }

figure.pg-pic { margin: 0; }


/* bare pictures (11/1 16:45, Carson: "sketch drawings should have no background"): no sand box, no crop; the drawing sits on the chalk */
.pg-pic.bare { background: none; aspect-ratio: auto; overflow: visible; }
.pg-pic.bare img { height: auto; object-fit: contain; transition: none; }
.pg-pic.bare:hover img { transform: none; }
.cr-draw { align-items: center; }
.cr-draw .c6-9 { padding-bottom: 1.5rem; }

/* the drawings (11/1 17:15): the three sheets hung from one rail, each the real sheet with its own title block (sensitive fields blanked),
   fanned; a click turns the front sheet to the back (shell.js initSheets). No hover lift. */
.sht-rail { height: 6px; margin: .6rem 0 0; border-radius: 3px; background: linear-gradient(#d9d6cf, #8f8b83 55%, #c9c6bf); box-shadow: 0 1px 2px rgba(32,31,28,.35); }
.sht-stack { position: relative; height: 0; padding-bottom: 78%; cursor: pointer; }
.sht { position: absolute; left: 0; top: 0; width: 84%; margin: 0; transform-origin: 50% 0; transition: transform .9s cubic-bezier(.16, 1, .3, 1); will-change: transform; }
.sht.s1 { transform: translate(16%, 1.6rem) rotate(1.3deg); z-index: 1; }
.sht.s2 { transform: translate(8%, .8rem) rotate(-.8deg); z-index: 2; }
.sht.s3 { transform: translate(0, 0) rotate(.4deg); z-index: 3; }
.sht.is-turning { transform: translate(-6%, 0) rotate(-3deg) scale(.98); z-index: 4; transition: transform .45s cubic-bezier(.4, 0, .6, 1); }
.sht-clip { position: absolute; left: 50%; top: -1.95rem; width: 1.5rem; height: 2.4rem; transform: translateX(-50%); z-index: 2; filter: drop-shadow(0 2px 2px rgba(0,0,0,.35)); }
.sht-paper { background: #fff; box-shadow: 0 1px 0 rgba(32,31,28,.12), 0 18px 40px -16px rgba(32,31,28,.45); }
.sht-paper > img { width: 100%; height: auto; display: block; }
@media (max-width: 760px) { .cr-draw > div { grid-column: 1 / -1; } .sht-stack { padding-bottom: 84%; margin-top: 1.5rem; } }

/* the Journal letters (11/1 16:40): a reading column in the page system */
.jl-title { max-width: 14ch; }
.jl-by { font-family: 'Laredo Light', 'Laredo', serif; font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; opacity: .7; margin: 1rem 0 0; }
.jl-body { max-width: 62ch; }
.jl-body p { font-family: var(--fb); font-weight: 300; font-size: 1.02rem; line-height: 1.85; letter-spacing: .01em; margin: 0 0 1.4rem; text-transform: none; }
.jl-body h2 { font-family: var(--fn); font-weight: 400; font-size: .78rem; letter-spacing: .26em; text-transform: uppercase; margin: 2.6rem 0 1rem; }
.jl-body ul, .jl-body ol { font-family: var(--fb); font-weight: 300; font-size: 1.02rem; line-height: 1.85; margin: 0 0 1.4rem 1.2rem; padding: 0; }
.jl-body em { font-style: italic; } .jl-body strong { font-weight: 400; }
.jl-sign { margin-top: 2.6rem; font-family: 'Laredo', serif; font-size: 1rem; letter-spacing: .16em; text-transform: uppercase; } .jl-sign span { font-family: 'Laredo Light', 'Laredo', serif; font-size: .62rem; letter-spacing: .18em; opacity: .7; }
.jl-nav { display: flex; justify-content: space-between; gap: 2rem; margin-top: 2.4rem; padding-top: 1.2rem; border-top: 1px solid rgba(92, 58, 24, .22); font-family: 'Laredo Light', 'Laredo', serif; font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; } .jl-nav a { color: var(--ink); text-decoration: none; opacity: .75; } .jl-nav a:hover { opacity: 1; }
.jl-list .pg-h a { color: inherit; text-decoration: none; } .jl-list .pg-h a:hover { text-decoration: underline; text-underline-offset: .25em; }
.jl-date { font-family: 'Laredo Light', 'Laredo', serif; font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; opacity: .6; margin-top: .5rem; }

/* final QA fixes (11/1 18:05) */
@media (max-width: 760px) { .pg-foot { grid-template-columns: repeat(2, 1fr); } .pg-foot nav, .pg-foot .pg-foot-social, .pg-foot p { grid-column: 1 / 3; } .pg-foot .pg-foot-social { justify-content: flex-start; } }
body.ls main.proj .proj-chapter-img { overflow: hidden; }
.pg .start-form { margin-top: 1.6rem; }

@media (max-width: 760px) { main.pg input, main.pg select, main.pg textarea, .pg .start-form input, .pg .start-form select, .pg .start-form textarea { font-size: 16px; } }

/* 11/1 18:50: the old frame's page head sat too low under the shell (terms, privacy, 404) */
body.ls .page-head { padding-top: clamp(3rem, 8vh, 5rem); }
/* 11/1 19:00 Carson: footer credit. One line on desktop; on the phone the credit drops to its own line under the copyright so nothing breaks mid-sentence. */
@media (max-width: 760px) { .pg-foot p .pg-credit { display: block; margin-top: .5rem; } }
@media (max-width: 760px) { .pg-dot { display: none; } }
.pg-credit a { text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 1px; }
/* 11/1 20:00 Carson: "give the page more white between projects, tell a story, be unique". The Second Shore told in seven parts, each opened by
   a numeral, a short head in the house type and a lot of chalk. Process small and up front; the site and the walk large; drawings whole, never cropped;
   any drawing opens full size on a click. Same type as every project page: Laredo heads, Plex Mono uppercase lines. */
.ss-gap { margin-top: clamp(6rem, 20vh, 12rem) !important; }
.ss-sec { padding: 0 var(--g) 0 calc(var(--g) * 2); }
.ss-head { display: grid; grid-template-columns: 3fr 5fr; gap: var(--g); align-items: start; margin-bottom: clamp(2.6rem, 8vh, 5rem); }
.ss-head .eyebrow { font-family: var(--fn); font-size: .72rem; letter-spacing: .26em; text-transform: uppercase; color: var(--ink); display: flex; gap: 1.4rem; align-items: baseline; }
.ss-head .eyebrow b { font-family: var(--ft); font-weight: 400; font-size: 1.1rem; letter-spacing: .1em; min-width: 2.4rem; }
.ss-head h2 { font-family: var(--ft); font-weight: 400; font-size: clamp(1.5rem, 2.8vw, 2.3rem); letter-spacing: .12em; line-height: 1.25; margin: 0 0 1.2rem; }
.ss-head p { margin: 0; max-width: 52ch; font-family: var(--fb); font-weight: 300; font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; line-height: 1.8; }
.ss-fig { margin: 0; } .ss-fig img { display: block; width: 100%; height: auto; mix-blend-mode: multiply; cursor: zoom-in; }
.ss-fig figcaption { margin-top: .8rem; font-family: var(--fn); font-size: .58rem; letter-spacing: .2em; text-transform: uppercase; opacity: .7; }
.ss-sec.is-strip .ss-body { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: clamp(.5rem, 1.2vw, 1.2rem); align-items: end; }
.ss-sec.is-strip figcaption { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .52rem; letter-spacing: .14em; }
.ss-sec.is-rules .ss-body { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 2rem); align-items: end; }
.ss-sec.is-wide .ss-body { display: grid; gap: clamp(4rem, 14vh, 8rem); }
.ss-sec.is-wide .ss-fig img { max-height: 88vh; width: auto; max-width: 100%; }
.ss-sec.is-grid2 .ss-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(3rem, 9vh, 6rem) clamp(1.5rem, 3vw, 3rem); align-items: end; }
body.ls main.proj .proj-chapter-img.is-drawing img { object-fit: contain; transform: none; mix-blend-mode: multiply; cursor: zoom-in; aspect-ratio: auto; max-height: 90vh; }
.ss-zoom { position: fixed; inset: 0; z-index: 400; background: var(--chalk, #F0EFEB); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 4vh 4vw; cursor: zoom-out; opacity: 0; transition: opacity .25s ease; }
.ss-zoom.is-on { opacity: 1; } .ss-zoom img { max-width: 100%; max-height: 86vh; object-fit: contain; mix-blend-mode: multiply; }
.ss-zoom p { margin: 1rem 0 0; font-family: var(--fn); font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; opacity: .7; }
@media (max-width: 760px) {
  .ss-gap { margin-top: clamp(4.5rem, 14vh, 7rem) !important; }
  .ss-sec { padding: 0 var(--g); }
  .ss-head { grid-template-columns: 1fr; gap: 1rem; }
  .ss-sec.is-strip .ss-body, .ss-sec.is-rules .ss-body { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; gap: .9rem; margin-right: calc(-1 * var(--g)); padding: 0 var(--g) .5rem 0; }
  .ss-sec.is-strip .ss-fig { flex: 0 0 38vw; scroll-snap-align: start; } .ss-sec.is-rules .ss-fig { flex: 0 0 72vw; scroll-snap-align: start; }
  .ss-sec.is-grid2 .ss-body { grid-template-columns: 1fr; }
}
/* 11/1 19:58 Carson: the Second Shore cover full frame like every project. The section has its own labels along the bottom; a deeper fade there lets the title sit clean over it. */
body.ls main.proj .proj-hero:has(img[src*="second-shore/dev/"])::after { height: 62%; background: linear-gradient(to top, rgba(18, 16, 14, .86) 0%, rgba(18, 16, 14, .55) 35%, rgba(18, 16, 14, 0) 100%); }
/* stacked drawings: each one on its own line, a sentence on the left, the drawing whole on the right; a long pause between them */
.ss-sec.is-stack .ss-body { display: grid; gap: clamp(4.5rem, 14vh, 9rem); }
.ss-sec.is-stack .ss-fig { display: grid; grid-template-columns: 3fr 5fr; gap: var(--g); align-items: end; }
.ss-sec.is-stack .ss-fig img { grid-column: 2; grid-row: 1; }
.ss-sec.is-stack .ss-fig figcaption { grid-column: 1; grid-row: 1; margin: 0 0 .4rem; max-width: 30ch; font-family: var(--fb); font-weight: 300; font-size: .74rem; letter-spacing: .06em; line-height: 1.8; opacity: .85; }
.ss-sec.is-wide .ss-fig figcaption { margin-top: 1rem; }
@media (max-width: 760px) { .ss-sec.is-stack .ss-fig { grid-template-columns: 1fr; } .ss-sec.is-stack .ss-fig img, .ss-sec.is-stack .ss-fig figcaption { grid-column: 1; grid-row: auto; } .ss-sec.is-stack .ss-fig figcaption { margin-top: .8rem; } }
/* 11/1 19:37 Carson (restored 20:05, lost in a later rewrite of this file): on every project the keyword line sits on the left edge, above the paragraph */
body.ls main.proj .proj-intent .eyebrow { max-width: none; margin-left: 0; margin-right: 0; text-align: left; }
/* 11/1 20:12 Carson: careers grouped by kind of work */
.cr-group { margin: clamp(2.6rem, 7vh, 4rem) 0 .6rem; } .cr-group:first-child { margin-top: 0; }
/* 11/1 20:13 Carson: back to the studio's own hand-drawn line icons (from the September site), drawn in the ink line, not filled */
.pg-foot-social a, .lk-social a, .cclose-social a { color: var(--ink); }
.pg-foot-social svg, .lk-social svg, .cclose-social svg { fill: none !important; stroke: currentColor; }
.cta-band h2 a { color: inherit; text-decoration: none; } .cta-band h2 a:hover { opacity: .7; }
/* 11/1 20:59 Carson: on the site and the walk, the head sits in the white space beside the drawing */
.ss-pair { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 3fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: end; }
.ss-pair .ss-fig img { max-height: 88vh; width: 100%; height: auto; object-fit: contain; }
.ss-pair .ss-head { grid-template-columns: 1fr; gap: 1.2rem; margin: 0 0 2.2rem; }
.ss-pair .ss-head .eyebrow { margin-bottom: .4rem; }
@media (max-width: 760px) { .ss-pair { grid-template-columns: 1fr; } .ss-pair .ss-head { order: -1; margin-bottom: 1.6rem; } }
/* 11/1 21:02 Carson: let the work speak. No numerals or labels on the Second Shore parts, no sentence beside each drawing; drawings run the full width */
.ss-head { grid-template-columns: 3fr 5fr; } .ss-head > div { grid-column: 2; }
.ss-sec.is-stack .ss-fig { grid-template-columns: 1fr; } .ss-sec.is-stack .ss-fig img { grid-column: 1; }
@media (max-width: 760px) { .ss-head > div { grid-column: 1; } }
/* 11/1 21:12 Carson: one spine. Every drawing on the Second Shore ends on the same line, and the words start just past it */
.ss-sec.is-wide .ss-body, .ss-sec.is-stack .ss-body { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 3fr); column-gap: clamp(1.5rem, 4vw, 4rem); row-gap: clamp(4.5rem, 14vh, 9rem); }
.ss-sec.is-wide .ss-body > .ss-fig, .ss-sec.is-stack .ss-body > .ss-fig { grid-column: 1; }
.ss-sec.is-wide .ss-body > .ss-pair { grid-column: 1 / -1; grid-template-columns: subgrid; column-gap: inherit; }
.ss-sec .ss-body .ss-fig img, .ss-pair .ss-fig img { width: 100%; height: auto; max-height: none; max-width: 100%; }
.ss-pair .ss-head { align-self: end; }
@media (max-width: 760px) { .ss-sec.is-wide .ss-body, .ss-sec.is-stack .ss-body { grid-template-columns: 1fr; } .ss-sec.is-wide .ss-body > .ss-pair { grid-template-columns: 1fr; } }
/* 11/1 21:13 Carson: the site plan sets the line; every drawing ends on it, and drawings sit the same distance apart as the pictures on the home wall (var(--g): 28px, 24px tablet, 18px phone) */
.ss-gap { margin-top: var(--g) !important; }
.ss-sec .ss-body, .ss-sec.is-wide .ss-body, .ss-sec.is-stack .ss-body { row-gap: var(--g); column-gap: var(--g); }
.ss-sec.is-strip .ss-body, .ss-sec.is-rules .ss-body { gap: var(--g); }
.ss-pair { gap: var(--g); }
.ss-pair .ss-head { padding-left: var(--g); }
.ss-sec .ss-fig figcaption { margin-top: .5rem; }
/* 11/1 21:14 Carson: elevations stitched into the right column beside the site plan; the words close the column at the bottom */
.ss-pair:has(.ss-side) { align-items: stretch; }
.ss-side { display: flex; flex-direction: column; gap: var(--g); padding-left: var(--g); }
.ss-side .ss-fig img { width: 100%; height: auto; }
.ss-side .ss-head { margin: auto 0 0; padding: var(--g) 0 0; }
.ss-pair .ss-side .ss-head { padding-left: 0; }
@media (max-width: 760px) { .ss-side { padding-left: 0; } .ss-side .ss-head { order: -1; padding-top: 0; } }
/* 11/1 21:15 Carson: drawings flashed white on a fast scroll. The fade-in put each drawing on its own layer for a moment, and while it was
   there the white paper could not blend into the chalk. Drawings now stay put: no fade, no slide, so the paper always disappears. */
.ss-sec.reveal, .ss-sec .reveal, main.proj .proj-chapter.proj-axo, .proj-hero.is-whole { opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; }
.ss-fig img { transform: none !important; will-change: auto !important; }
/* 11/1 21:29 Carson: the same clean channel for the rail on every phone page (the cover picture still runs under it) */
@media (max-width: 760px) { body.ls main.proj > *:not(.proj-hero-pin), body.ls main.pg { padding-left: calc(var(--g0, 26px) + 12px) !important; box-sizing: border-box; } }
/* 11/1 21:30 Carson: the state outline sits centered on the page on every project */
body.ls main.proj .proj-outline { justify-self: center; text-align: center; }
body.ls main.proj .proj-outline svg { margin: 0 auto; display: block; }
@media (max-width: 760px) { body.ls main.proj .proj-outline { grid-column: 1 / -1; justify-self: center; width: 70%; max-width: 280px; margin: 0 auto; } }
/* 11/1 21:31: collaborator credit sits with the facts */
body.ls main.proj .proj-fact.is-collab a { color: inherit; border-bottom: 1px solid currentColor; text-decoration: none; }
/* 11/1 21:51 Carson: the collaborator credit closes the project, just before the next project links */
body.ls main.proj .proj-credit { padding: calc(var(--g) * 3) var(--g) 0 calc(var(--g) * 2); }
body.ls main.proj .proj-credit p { margin: 0; padding-top: var(--g); border-top: 1px solid rgba(92, 58, 24, .28); font-family: var(--fb); font-weight: 300; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; line-height: 1.8; }
body.ls main.proj .proj-credit b { display: block; font-family: var(--fn); font-weight: 400; font-size: .66rem; letter-spacing: .26em; margin-bottom: .4rem; }
body.ls main.proj .proj-credit a { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; }
@media (max-width: 760px) { body.ls main.proj .proj-credit { padding-right: var(--g); } }
/* 11/1 22:07: drawings in Services tiles sit whole on the chalk, no fade (no white flash) */
.t-pic:has(img[src*="second-shore/dev/"]) { background: transparent !important; opacity: 1 !important; transform: none !important; transition: none !important; }
.t-pic img[src*="second-shore/dev/"] { object-fit: contain !important; transform: none !important; aspect-ratio: auto !important; }
/* 11/1 22:11 Carson: the Journal list. Every letter's picture the same 3:2 frame; on the phone the picture runs the full width,
   the numeral sits small above the title, and the letters follow each other at an even pace */
.jl-list .jl-thumb { display: block; width: min(420px, 100%); margin: 0 0 1.1rem; overflow: hidden; }
.jl-list .jl-thumb img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.jl-list li { padding: 1.6rem 0 2.2rem; }
.jl-list .pg-h { margin-top: 0; }
@media (max-width: 760px) {
  .jl-list li { display: block; padding: 0 0 calc(var(--g) * 2.5); }
  .jl-list li > i { display: block; margin: 0 0 .7rem; font-size: .66rem; opacity: .7; }
  .jl-list .jl-thumb { width: 100%; margin-bottom: 1rem; }
  .jl-list .pg-h { font-size: 1.15rem; line-height: 1.35; margin-bottom: .6rem; }
  .jl-list .pg-text { font-size: .8rem; line-height: 1.75; margin-bottom: .6rem; }
  #archive .c1-3 { margin-bottom: calc(var(--g) * 1.5); }
  #archive .c3-9 { grid-column: 1 / -1; }
}
/* 11/1 22:17 Carson: on the phone the section fills its tile like the other pictures, cropped in on the right (the pavilion and the steps) */
@media (max-width: 760px) { .t-pic img[src*="second-shore/dev/"] { object-fit: cover !important; object-position: 78% 45% !important; } }

/* ===== 11/1 23:10 Carson "yes to all" after the phone + web audit. Everything below is phone only (max-width 760px) except the pending socials. ===== */
/* social accounts that do not exist yet stay hidden everywhere until their address is filled in (remove data-pending to show one) */
a[data-pending] { display: none !important; }
@media (max-width: 760px) {
  /* the footer on every page reads like the home footer: centered, two links a row, socials and credit centered */
  .pg-foot { display: flex !important; flex-direction: column; align-items: center; text-align: center; margin-top: calc(var(--g) * 4); padding-top: calc(var(--g) * 2); gap: 0; }
  .pg-foot nav { display: grid !important; grid-template-columns: repeat(2, max-content); justify-content: center; column-gap: 2.6rem; row-gap: .2rem; width: 100%; }
  .pg-foot nav a { display: flex; align-items: center; justify-content: center; min-height: 44px; font-size: .7rem; letter-spacing: .2em; opacity: .75; }
  .pg-foot nav a:nth-last-child(1):nth-child(odd) { grid-column: 1 / -1; }
  .pg-foot .pg-foot-social { display: flex !important; justify-content: center !important; gap: .4rem; margin-top: 1.4rem; width: 100%; }
  .pg-foot-social a { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; }
  .pg-foot p { text-align: center; margin-top: 1.6rem; font-size: .6rem; line-height: 2; letter-spacing: .14em; width: 100%; }
  .pg-foot p .pg-credit { padding: 0 6%; }
  .pg-foot p .pg-credit { display: block; margin-top: .6rem; }
  /* previous / all projects / next: All projects centered on its own line, the two neighbours under it, left and right */
  body.ls main.proj .proj-next-links { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem 1rem; font-size: .66rem; letter-spacing: .2em; }
  body.ls main.proj .proj-next-links a { display: flex; align-items: center; min-height: 44px; line-height: 1.5; }
  body.ls main.proj .proj-next-links a:nth-child(2) { grid-column: 1 / -1; order: -1; justify-content: center; }
  body.ls main.proj .proj-next-links a:last-child { justify-content: flex-end; text-align: right; }
  body.ls main.proj .cta-band { padding-bottom: calc(var(--g) * 1); }
  /* taps: every button and text link at least 44px tall; the rail's INDEX and search get a larger invisible hit area */
  main.pg button[type="submit"], .pg-link { min-height: 44px; display: inline-flex; align-items: center; }
  .rail-index { padding: .9rem .7rem; } .rail-glyph { padding: .9rem .7rem; }
  .form-privacy { font-size: .7rem; line-height: 1.8; }
  /* contact form: the file button and the menu in the site's own type */
  main.pg input[type="file"] { font-family: var(--fn); font-size: .7rem; letter-spacing: .1em; max-width: 100%; }
  main.pg input[type="file"]::file-selector-button { font: inherit; letter-spacing: .2em; text-transform: uppercase; background: none; border: 1px solid currentColor; padding: .7rem 1rem; margin-right: .8rem; color: var(--ink); border-radius: 0; }
  main.pg select { font-family: var(--fn); text-transform: uppercase; letter-spacing: .14em; }
  /* index: no strip of page above it, the sort row scrolls, two-line names breathe */
  .ix-sort { padding-right: 1.2rem; }
  .ix-grid figcaption { line-height: 1.35; }
  /* nothing a visitor reads below 11px */
  .sv .t-lines i, .sv .t-coord i, .jl-date, .jl-by, .ss-fig figcaption { font-size: .7rem !important; }
  /* services: rows grow to their text so there is no hole under the words */
  .sv:not(.ck) { grid-auto-rows: minmax(calc(var(--cell) * .55), auto); }
  .sv:not(.ck) .t-lines { grid-row: span 1; padding-bottom: calc(var(--g) * 1.5); justify-content: flex-start; }
}
/* 11/1 23:20 every screen: a drawing is never zoomed by the picture drift, so its labels stay inside the page (Marlowe front elevation was cut at "TANDING SEAM") */
main.proj figure img[src*="/plan-"] { transform: none !important; }
main.proj figure.proj-wide:has(img[src*="/plan-"]) { overflow: hidden; }
/* 11/1 23:26 Carson: on the phone the Index opens straight to every project, no sort, view or type filters (desktop unchanged) */
@media (max-width: 760px) { .ls-index .ix-sort, .ls-index .ix-tags { display: none !important; } }
/* 11/1 23:30 Carson (Bennett Casita): a labeled drawing is always shown whole, never cropped to fill its frame (labels and level marks were cut) */
main.proj figure:has(> img[src*="/plan-"]) { height: auto !important; min-height: 0 !important; aspect-ratio: auto !important; background: transparent !important; }
main.proj figure > img[src*="/plan-"] { position: static !important; width: 100% !important; height: auto !important; object-fit: contain !important; }
/* phone: the bleed picture keeps the same right margin as every other picture */
@media (max-width: 760px) { body.ls main.proj figure.proj-wide.is-bleed { width: auto !important; margin-right: var(--g) !important; } }
body.ls main.proj figure.proj-chapter-img:has(> img[src*="/plan-"]), body.ls main.proj figure.proj-wide:has(> img[src*="/plan-"]) { height: auto !important; min-height: 0 !important; aspect-ratio: auto !important; align-self: center !important; overflow: visible !important; }
body.ls main.proj figure.proj-chapter-img > img[src*="/plan-"], body.ls main.proj figure.proj-wide > img[src*="/plan-"] { position: static !important; inset: auto !important; width: 100% !important; height: auto !important; max-height: none !important; object-fit: contain !important; transform: none !important; aspect-ratio: auto !important; }

/* 11/2: First lines text matches the surrounding body text (same size, line height and spacing as the intent and essay paragraphs). Position unchanged. */
body.ls main.proj .proj-sketch-txt p { font-size: .82rem; line-height: 1.8; letter-spacing: .06em; font-weight: 300; }