/* Inner pages: work, labs, consulting, journal. Tokens come from style.css. */
body { background: var(--ink); }
.c-navy { background: var(--navy); color: var(--white); }
.c-blue { background: var(--blue); color: var(--white); }
.c-violet { background: var(--violet); color: var(--mint); }
.c-pink { background: var(--pink); color: var(--ink); }
.c-lime { background: var(--lime); color: var(--ink); }
.c-pale { background: var(--pale); color: var(--ink); }
.c-red { background: var(--red); color: var(--yellow); }
.c-coral { background: var(--coral); color: var(--ink); }
.c-yellow { background: var(--yellow); color: var(--ink); }

.sitebar, .foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 6px var(--gutter); min-height: 60px; background: var(--ink); color: var(--white); }
.mark { font-weight: 900; font-variation-settings: "wdth" 125, "wght" 900; font-size: clamp(17px, 2.2vw, 24px); text-decoration: none; color: var(--yellow); white-space: nowrap; }
.sitebar nav, .foot nav { display: flex; gap: clamp(2px, 1.4vw, 20px); }
.sitebar nav a, .foot nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 clamp(4px, .8vw, 10px); font-weight: 700; font-size: clamp(14px, 1.3vw, 18px); text-decoration: none; }
.sitebar nav a:hover, .foot nav a:hover { color: var(--yellow); }
.sitebar nav a[aria-current] { color: var(--yellow); text-decoration: underline; text-underline-offset: 5px; }
.foot { min-height: 96px; }

/* listing: heading plus rows that share the rest of the window */
.head { background: var(--ink); color: var(--white); padding: 1vh var(--gutter) 3vh; display: flex; align-items: end; justify-content: space-between; gap: 4vw; }
.head h1 { font-size: min(24vh, 17vw); color: var(--yellow); }
.head p { max-width: 26em; font-size: clamp(18px, min(3vh, 1.8vw), 30px); line-height: 1.25; font-weight: 500; text-align: right; padding-bottom: 1.5vh; }
.rows { display: flex; flex-direction: column; min-height: calc(100vh - 60px - min(24vh, 17vw) - 5vh); min-height: calc(100svh - 60px - min(24vh, 17vw) - 5vh); }
.entry { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 4vw; padding: 2vh var(--gutter); text-decoration: none; overflow: hidden; }
.entry-text { display: flex; flex-direction: column; gap: .35em; min-width: 0; }
.meta { font-weight: 800; font-size: clamp(14px, 1.9vh, 19px); }
.entry-title { font-size: min(9vh, 6.2vw); }
.entry-sum { font-size: clamp(16px, min(2.5vh, 1.5vw), 24px); font-weight: 500; line-height: 1.25; max-width: 40em; }
.entry img { height: 21vh; width: auto; max-width: 34vw; object-fit: contain; flex: none; transition: transform .35s cubic-bezier(.22, 1, .36, 1); }
.entry:hover img { transform: scale(1.06) rotate(-1.5deg); }
.entry:focus-visible, .cta:focus-visible, .next:focus-visible, .sitebar a:focus-visible, .foot a:focus-visible { outline: 3px solid var(--white); outline-offset: -3px; }

/* article: a pinned colour plate beside the reading column */
.piece { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); background: var(--white); color: var(--ink); }
.plate { min-height: calc(100vh - 60px); min-height: calc(100svh - 60px); }
.plate-in { position: sticky; top: 0; min-height: calc(100vh - 60px); min-height: calc(100svh - 60px); padding: clamp(24px, 5vh, 56px) var(--gutter); display: flex; flex-direction: column; justify-content: center; gap: 2vh; }
.plate h1 { font-size: min(11vh, 6.2vw); }
.plate .lede { font-size: clamp(18px, min(3vh, 1.7vw), 28px); line-height: 1.25; font-weight: 600; }
.plate img { width: 100%; max-height: 44vh; object-fit: contain; object-position: left center; }
.plate .preview { height: 52vh; width: auto; max-width: 100%; border-radius: 6px; align-self: flex-start; }
.plate .cta { align-self: flex-start; }
.text { padding: clamp(32px, 8vh, 96px) clamp(20px, 6vw, 110px); align-self: center; font-size: clamp(18px, 1.35vw, 22px); line-height: 1.5; max-width: 54em; }
.text h2 { font-size: 1.7em; font-weight: 900; font-variation-settings: "wdth" 110, "wght" 900; line-height: 1.05; margin: 1.5em 0 .45em; }
.text h2:first-child { margin-top: 0; }
.text h3 { font-size: 1.25em; font-weight: 800; margin: 1.3em 0 .3em; }
.text p, .text ul, .text blockquote { margin-bottom: 1em; }
.text ul { padding-left: 1.2em; }
.text li { margin-bottom: .35em; }
.text img, .text video { display: block; width: 100%; border-radius: 6px; margin: .4em 0 1em; }
.text a { font-weight: 700; text-underline-offset: 3px; }
.text code { font-size: .92em; background: var(--pale); padding: .08em .3em; border-radius: 3px; }
.text blockquote { border-left: 6px solid var(--yellow); padding-left: 1em; font-weight: 700; }
.next { display: inline-block; margin-top: 1.4em; font-weight: 900; font-size: 1.15em; }

/* consulting */
.pitch { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 3vw; align-items: center; min-height: calc(100vh - 60px); min-height: calc(100svh - 60px); padding: 4vh var(--gutter); }
.pitch h1 { font-size: min(13vh, 6.6vw); margin-top: .1em; }
.pitch .lede { font-size: clamp(20px, min(3.8vh, 2.3vw), 38px); line-height: 1.22; font-weight: 600; margin: .6em 0 .8em; max-width: 26em; }
.pitch img { width: 100%; max-height: 80vh; object-fit: cover; border-radius: 8px; }
.meet { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 4vw; align-items: center; min-height: 100vh; min-height: 100svh; padding: 5vh var(--gutter); }
.meet img { width: 100%; max-height: 86vh; object-fit: cover; border-radius: 8px; }
.meet h2 { font-size: min(12vh, 6.4vw); margin-bottom: .4em; }
.meet p { font-size: clamp(18px, min(3vh, 1.8vw), 30px); line-height: 1.3; font-weight: 500; margin-bottom: .8em; }
.meet a { font-weight: 800; text-underline-offset: 3px; }
.cta { display: inline-flex; align-items: center; min-height: 52px; padding: 0 24px; border-radius: 26px; background: var(--ink); color: var(--yellow); font-weight: 800; font-size: clamp(17px, 2.4vh, 22px); text-decoration: none; }
.cta.soon { background: none; color: inherit; padding: 0; min-height: 0; font-weight: 800; }
.offers { display: grid; grid-template-columns: repeat(6, 1fr); background: var(--ink); gap: 2px; min-height: 100vh; min-height: 100svh; }
.offer { grid-column: span 2; display: flex; flex-direction: column; justify-content: center; gap: .6em; padding: 4vh clamp(18px, 3vw, 48px); background: var(--white); }
.offer:nth-child(1) { background: var(--violet); color: var(--mint); }
.offer:nth-child(2) { background: var(--pink); }
.offer:nth-child(3) { background: var(--peri); }
.offer:nth-child(4) { background: var(--lime); }
.offer:nth-child(5) { background: var(--yellow); }
.offer:nth-child(6) { background: var(--coral); }
.offer h2 { font-size: min(6.4vh, 3.3vw); }
.offer p { font-size: clamp(18px, min(2.8vh, 1.7vw), 28px); line-height: 1.28; font-weight: 500; }
.steps { padding: 6vh var(--gutter); min-height: 70vh; min-height: 70svh; display: flex; flex-direction: column; justify-content: center; gap: 5vh; }
.steps h2 { font-size: min(14vh, 9vw); }
.steps ol { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 3vw, 48px); }
.steps h3 { font-size: clamp(26px, 4.6vh, 44px); font-weight: 900; font-variation-settings: "wdth" 110, "wght" 900; color: var(--yellow); margin-bottom: .3em; }
.steps p { font-size: clamp(18px, min(2.8vh, 1.7vw), 28px); line-height: 1.28; }

.me { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5vw; align-items: center; min-height: calc(100vh - 60px); min-height: calc(100svh - 60px); padding: 4vh var(--gutter); }
.me h1 { font-size: min(14vh, 7vw); margin: .15em 0 .4em; }
.me p:not(.meta) { font-size: clamp(18px, min(3vh, 1.7vw), 30px); line-height: 1.3; font-weight: 500; max-width: 40em; margin-bottom: .8em; }
.me img { height: 84vh; width: auto; border-radius: 8px; }
.built { min-height: 80vh; min-height: 80svh; padding: 6vh var(--gutter); display: flex; flex-direction: column; justify-content: center; gap: 4vh; }
.built h2 { font-size: min(14vh, 8.6vw); }
.built-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(10px, 1.4vw, 22px); }
.built-grid a { display: flex; flex-direction: column; gap: .5em; min-height: 34vh; padding: clamp(18px, 3vh, 34px); border-radius: 8px; background: var(--white); color: var(--ink); text-decoration: none; transition: background .2s; }
.built-grid a:hover { background: var(--yellow); }
.built-grid h3 { font-size: clamp(24px, min(4.6vh, 2.6vw), 44px); font-weight: 900; font-variation-settings: "wdth" 110, "wght" 900; line-height: 1; }
.built-grid p { font-size: clamp(17px, min(2.5vh, 1.45vw), 24px); line-height: 1.3; }
.reach { min-height: 100vh; min-height: 100svh; padding: 6vh var(--gutter); display: flex; flex-direction: column; justify-content: center; gap: 4vh; }
.reach h2 { font-size: min(18vh, 11vw); }
.reach ul { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 3vh 4vw; }
.reach li { display: flex; flex-direction: column; gap: .2em; min-width: 0; }
.reach li .fat { font-size: min(5.6vh, 3vw); --w: 100; overflow-wrap: anywhere; line-height: 1.05; }
.reach a { text-underline-offset: 4px; }

@media (max-aspect-ratio: 9/10) {
  .me { grid-template-columns: 1fr; min-height: 0; padding-block: 32px; }
  .me h1 { font-size: 13vw; }
  .me p:not(.meta) { font-size: 18px; }
  .me img { height: 58vh; justify-self: center; }
  .built-grid { grid-template-columns: 1fr; }
  .built-grid a { min-height: 0; }
  .built-grid h3 { font-size: 26px; }
  .built h2, .reach h2 { font-size: 14vw; }
  .reach { min-height: 0; padding-block: 36px; }
  .reach ul { grid-template-columns: 1fr; }
  .reach li .fat { font-size: 7vw; }
  .sitebar { flex-direction: column; align-items: start; gap: 0; padding-top: 12px; }
  .sitebar nav { width: 100%; justify-content: space-between; }
  .foot { flex-direction: column; align-items: start; gap: 0; padding-block: 16px; }
  .head { flex-direction: column; align-items: start; gap: 8px; padding-top: 2vh; }
  .head h1 { font-size: 18.5vw; }
  .head p { text-align: left; font-size: 18px; }
  .rows { min-height: 0; }
  .entry { flex-direction: column-reverse; align-items: start; padding: 28px var(--gutter); gap: 16px; }
  .entry-title { font-size: 11vw; }
  .entry-sum { font-size: 17px; }
  .entry img { height: auto; width: 100%; max-width: none; max-height: 34vh; object-position: left center; }
  .piece { grid-template-columns: 1fr; }
  .plate, .plate-in { min-height: 0; position: static; }
  .plate h1 { font-size: 12vw; }
  .plate img { max-height: 40vh; }
  .plate .preview { height: 56vh; align-self: center; }
  .text { font-size: 18px; }
  .pitch { grid-template-columns: 1fr; min-height: 0; padding-block: 32px; }
  .pitch h1 { font-size: 12vw; }
  .meet { grid-template-columns: 1fr; min-height: 0; padding-block: 32px; }
  .meet h2 { font-size: 12vw; }
  .meet p { font-size: 18px; }
  .meet img { max-height: 40vh; }
  .pitch img { max-height: 36vh; }
  .offers { grid-template-columns: 1fr; min-height: 0; }
  .offer { grid-column: auto; padding-block: 32px; }
  .offer h2 { font-size: 9vw; }
  .steps ol { grid-template-columns: 1fr; }
  .steps h2 { font-size: 14vw; }
}