/* S340 · the MetaLab review upgrades, page by page. Loaded after cai-s340.css on every page. */

/* ---------- home · On stage: justified rows (every photo whole, one height per row) ---------- */
.hx-jrow{display:flex;gap:20px;margin-top:20px}
.hx-jrow>.hx-shot.hx-j{flex:var(--f) 1 0;aspect-ratio:var(--ar);grid-column:auto;grid-row:auto;min-width:0}
.hx-jrow>.hx-shot.hx-j figcaption{padding:70px 22px 18px}
.hx-jrow>.hx-shot.hx-j .hx-st{font-size:20px}
.hx-subh{display:flex;align-items:baseline;justify-content:space-between;gap:24px;flex-wrap:wrap;margin:64px 0 0;padding-top:28px;border-top:1px solid var(--hx-line,#E7E2D8)}
.hx-subh h3{font:700 clamp(26px,2.6vw,34px)/1.1 'Source Serif Sub','Source Serif 4',Georgia,serif;letter-spacing:-.015em;color:var(--hx-text,#161514);margin:0}
.hx-subh p{font:400 16px/1.6 'Public Sans',system-ui,sans-serif;color:var(--hx-mute,#6E6960);margin:0;max-width:520px}
.hx-hillset .hx-jrow{margin-top:24px}

/* ---------- home · Off the stage: printed photos, captions under them ---------- */
.hx-ogrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:24px;align-items:start}
.hx-ph{margin:0;background:#fff;border-radius:var(--hx-r,18px);padding:10px 10px 0;box-shadow:var(--sh-rest)}
.hx-pf{position:relative;aspect-ratio:3/4;border-radius:12px;overflow:hidden;background:#E9EEF6}
.hx-pf>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hx-ph figcaption{font:600 16px/1.35 'Source Serif Sub','Source Serif 4',Georgia,serif;color:var(--hx-text,#161514);padding:14px 6px 16px;text-wrap:balance}
.hx-ph-pair .hx-pf{overflow:visible}
.hx-ph-pair .hx-pf>img:first-child{border-radius:12px}
.hx-pf>img.hx-pin{inset:auto -14px -18px auto;width:44%;height:auto;aspect-ratio:3/4;border-radius:6px;border:5px solid #fff;box-shadow:0 14px 30px -12px rgba(22,21,20,.45);transform:rotate(4deg)}
.hx-n24{display:flex;flex-direction:column;height:100%;background:var(--hx-ink,#0B1730);color:#fff!important;border-radius:var(--hx-r,18px);overflow:hidden;text-decoration:none!important;box-shadow:var(--sh-rest);transition:transform .3s var(--hx-ease),box-shadow .3s}
.hx-n24 img{display:block;width:100%;height:auto;aspect-ratio:640/372;object-fit:cover;object-position:50% 0}
.hx-n24b{display:flex;flex-direction:column;gap:10px;padding:18px 20px 20px;flex:1}
.hx-n24k{font:500 10px/1.4 'IBM Plex Mono',monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--hx-sun,#FFD9A0)}
.hx-n24t{font:700 19px/1.25 'Source Serif Sub','Source Serif 4',Georgia,serif;color:#fff}
.hx-n24r{display:inline-flex;align-items:center;gap:8px;margin-top:auto;font:500 14px/1 'Public Sans',system-ui,sans-serif;color:var(--hx-pale,#9DBCFA)}
.hx-n24r svg{width:14px;height:14px}
.hx-n24:hover{transform:translateY(-3px);box-shadow:var(--sh-up)}
.hx-n24:hover .hx-n24r{color:#fff}
.hx-n24:focus-visible{outline:2.5px solid var(--hx-blue,#1559F5);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.hx-n24,.hx-n24:hover{transition:none;transform:none}}
@media (max-width:980px){.hx-ogrid{grid-template-columns:repeat(2,minmax(0,1fr))}.hx-n24{flex-direction:row;height:auto;grid-column:1/-1}.hx-n24 img{width:38%;flex:none;aspect-ratio:auto;height:auto;align-self:stretch}}
@media (max-width:700px){
  .hx-jrow{flex-direction:column;gap:14px;margin-top:14px}
  .hx-jrow>.hx-shot.hx-j{flex:none;width:100%}
  .hx-jrow>.hx-shot.hx-j figcaption{padding:48px 18px 16px}
  .hx-jrow>.hx-shot.hx-j .hx-st{font-size:19px}
  .hx-subh{margin-top:44px;padding-top:22px}
  .hx-ogrid{gap:14px}
  .hx-ph{padding:7px 7px 0;border-radius:14px}
  .hx-ph figcaption{font-size:14.5px;padding:11px 4px 13px}
  .hx-pf>img.hx-pin{right:-8px;bottom:-10px;border-width:4px}
  .hx-ph-pair{grid-column:1/-1}.hx-ph-pair .hx-pf{aspect-ratio:4/5}.hx-ph-pair .hx-pf>img.hx-pin{width:36%}
  .hx-n24{flex-direction:column}.hx-n24 img{width:100%;aspect-ratio:640/372;align-self:auto}
  .hx-n24b{padding:14px 16px}
  .hx-n24t{font-size:17px}
}

/* ---------- every page: content never waits on an observer at opacity 0 ---------- */
.rv:not(.mural),[data-rv]{opacity:1!important;transform:none!important}

/* ---------- /writing/ · the hero carries the newest note ---------- */
.wr-head.wr-h340{max-width:none;display:grid;grid-template-columns:minmax(0,1fr) 440px;gap:28px 56px;align-items:end}
.wr-h340 .wr-spec{grid-column:1/-1;margin-top:8px}
.wr-newest{display:grid;grid-template-columns:132px minmax(0,1fr);gap:18px;align-items:center;background:#fff;border-radius:18px;padding:14px 18px 14px 14px;box-shadow:0 1px 1px rgba(22,21,20,.035),0 3px 8px rgba(22,21,20,.04),0 14px 34px rgba(22,21,20,.07)}
.wr-nart{display:block;border-radius:12px;overflow:hidden;aspect-ratio:1}
.wr-nart img{display:block;width:100%;height:100%;object-fit:cover}
.wr-nk{display:flex;align-items:center;gap:8px;margin:0 0 6px;font:500 10px/1.4 'IBM Plex Mono',monospace;letter-spacing:.16em;text-transform:uppercase;color:#1559F5}
.wr-ndot{width:7px;height:7px;border-radius:50%;background:#1559F5;flex:none}
.wr-nt{margin:0 0 12px;font:700 17px/1.25 'Source Serif 4',Georgia,serif;letter-spacing:-.005em}
.wr-nt a{color:#161514;text-decoration:none}
.wr-nt a:hover{text-decoration:underline;text-underline-offset:3px}
.wr-nacts{display:flex;flex-wrap:wrap;gap:8px}
.wr-nplay,.wr-nread{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border-radius:999px;font:500 14px/1 'Public Sans',system-ui,sans-serif;text-decoration:none;white-space:nowrap}
.wr-nplay{background:#161514;color:#fff;padding-left:6px}
.wr-nplay>span{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#1559F5}
.wr-nplay svg{width:12px;height:12px;fill:#fff}
.wr-nread{border:1px solid #D9D3C7;color:#161514}
.wr-nplay small,.wr-nread small{font:400 12px/1 'Public Sans',system-ui,sans-serif;opacity:.75}
.wr-nplay:hover{background:#1559F5}.wr-nread:hover{border-color:#161514}
.wr-newest a:focus-visible,.wr a:focus-visible,.wr button:focus-visible{outline:2.5px solid #1559F5;outline-offset:3px;border-radius:6px}
@media (max-width:1000px){.wr-head.wr-h340{grid-template-columns:minmax(0,1fr)}.wr-newest{max-width:520px}}
@media (max-width:420px){.wr-newest{grid-template-columns:88px minmax(0,1fr);gap:14px;padding:12px}}
/* filter chips: one tidy grid on a phone, never a lone chip */
@media (max-width:560px){.wr-chips{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;width:100%}.wr-chips button{justify-content:center;width:100%}}
@media (max-width:520px){
  .wr-newest{grid-template-columns:92px minmax(0,1fr);grid-template-rows:auto auto auto;gap:6px 14px;padding:12px}
  .wr-nart{grid-row:1/3}
  .wr-nb{display:contents}
  .wr-nk{grid-column:2;align-self:end;margin:0}
  .wr-nt{grid-column:2;align-self:start;margin:0;font-size:16px}
  .wr-nacts{grid-column:1/-1;margin-top:8px}
  .wr-nacts a{flex:1;justify-content:center}
}
/* one phone gutter on every page: 20px, as on the home */
@media (max-width:560px){body>.wrap,main>.wrap,main .wrap.wr,main>section>.wrap,main>.wrap>.wrap{padding-left:20px!important;padding-right:20px!important}}

/* ---------- /why/ · the reading column sits on the same center as the drawings ---------- */
.why-body>*{margin-left:auto!important;margin-right:auto!important}
/* pull quotes: one designed component, the letter's loudest lines set large */
@media screen{
  .why-body .pq{max-width:640px;margin:64px auto!important;padding:0 12px!important;border:0!important;font-size:clamp(26px,3.6vw,38px)!important;line-height:1.2!important;letter-spacing:-.015em;text-wrap:balance}
  .why-body .pq i{font:700 88px/.5 'Source Serif 4',Georgia,serif!important;height:40px;margin:0 auto 14px!important;color:#1559F5}
  .why-body .pq::after{content:"";display:block;width:56px;height:3px;border-radius:3px;background:#1559F5;margin:26px auto 0}
}
@media screen and (max-width:560px){.why-body .pq{margin:48px auto!important}.why-body .pq i{font-size:72px!important;height:32px}}

/* ---------- /press/ · the newest receipt in the hero, photos and lines each get the full width ---------- */
@media screen{
  .pk-h340{grid-template-columns:minmax(0,1fr) 360px!important;grid-template-rows:auto auto 1fr;align-items:start!important}
  .pk-h340>.pk-dl{margin-top:24px}
  .pk-h340>.wr-hl,.pk-h340>.wr-spec,.pk-h340>.pk-dl{grid-column:1}
  .pk-h340>.wr-spec{margin-top:0}
  .pk-rcard{grid-column:2;grid-row:1/span 3;margin:0;background:#fff;border-radius:20px;padding:10px 10px 0;box-shadow:0 1px 1px rgba(22,21,20,.035),0 3px 8px rgba(22,21,20,.04),0 14px 34px rgba(22,21,20,.07)}
  .pk-rcard img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 30%;border-radius:12px}
  .pk-rcard figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:14px 6px 16px}
  .pk-rcard figcaption span{font:600 16px/1.35 'Source Serif 4',Georgia,serif;color:#161514}
  .pk-rcard figcaption a{flex:none;font:500 13px/1 'Public Sans',system-ui,sans-serif;color:#1559F5;text-decoration:none;padding:8px 0}
  .pk-rcard figcaption a:hover{text-decoration:underline;text-underline-offset:3px}

  .pk-two{display:block!important}
  .pk-photo{display:grid;grid-template-columns:340px minmax(0,1fr);gap:0 44px;align-items:start}
  .pk-photo>h2{grid-column:1/-1}
  .pk-photo>figure{grid-column:1}
  .pk-photo>figure img{max-width:none}
  .pk-photo>.pk-stage{grid-column:2;margin-top:22px}
  .pk-stage ul{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:20px 14px!important}
  .pk-stage .pk-port img{object-position:50% 22%}
  .pk-lines{margin-top:clamp(56px,7vw,88px)}
  .pk-lines ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;border-top:0!important}
  .pk-lines li{background:#fff;border:0!important;border-radius:18px;padding:22px 22px 18px!important;box-shadow:0 1px 1px rgba(22,21,20,.035),0 3px 8px rgba(22,21,20,.04),0 14px 34px rgba(22,21,20,.05)}
}
@media screen and (max-width:1000px){
  .pk-h340{grid-template-columns:minmax(0,1fr)!important}
  .pk-rcard{grid-column:1;grid-row:auto;max-width:420px;order:4;margin-top:8px}
  .pk-rcard img{aspect-ratio:1}
  .pk-photo{grid-template-columns:minmax(0,1fr)}
  .pk-photo>.pk-stage{grid-column:1}
  .pk-photo>figure img{max-width:420px}
}
@media screen and (max-width:700px){
  .pk-stage ul{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .pk-lines ul{grid-template-columns:minmax(0,1fr)}
  .pk-zip{flex-direction:column;align-items:flex-start!important;justify-content:center;gap:6px!important;padding:14px 24px!important;border-radius:22px!important}
  .pk-zip small{border-left:0!important;padding-left:0!important}
}

/* ---------- /contact/ · a real person answers, not a faint sketch ---------- */
.ch .aloha-sketch{display:none!important}
.ch-me{display:grid;grid-template-columns:72px minmax(0,1fr);gap:16px;align-items:center;background:#fff;border-radius:20px;padding:18px 22px 18px 18px;box-shadow:0 1px 1px rgba(22,21,20,.035),0 3px 8px rgba(22,21,20,.04),0 14px 34px rgba(22,21,20,.07);max-width:400px}
.ch-me img{width:72px;height:72px;border-radius:50%;object-fit:cover;display:block}
.ch .ch-me p{margin:0;max-width:none}
.ch .ch-me .ch-mn{font:700 18px/1.25 'Source Serif 4',Georgia,serif;color:#161514}
.ch .ch-me .ch-mr{font:400 13.5px/1.45 'Public Sans',system-ui,sans-serif;color:#5E5A53;margin-top:2px}
.ch .ch-me .ch-mh{font:400 13.5px/1.45 'Public Sans',system-ui,sans-serif;color:#3F3B34;margin-top:8px}
.ch-mb{display:inline-flex;align-items:center;min-height:40px;margin-top:10px;padding:0 16px;border-radius:999px;background:#161514;color:#fff!important;font:500 14px/1 'Public Sans',system-ui,sans-serif;text-decoration:none!important}
.ch-mb:hover{background:#1559F5}
.ch-mb:focus-visible{outline:2.5px solid #1559F5;outline-offset:3px}
@media screen and (min-width:1001px){.ch{padding-bottom:36px!important}.ch-me{position:absolute;right:0;top:50%;transform:translateY(-50%);width:400px}}
@media screen and (max-width:1000px){.ch-me{margin:24px 0 28px}}
@media print{.ch-me{display:none}}

/* ---------- 404 · the gulls show against the night sky ---------- */
:root:has(main>.sea) #gull path{stroke:#C9D8F5}

/* ---------- home · 07 My why: heading and excerpt start on one line, nothing floats in an empty quadrant ---------- */
@media screen and (min-width:861px){
  .why-teaser .wt-in>.pa{position:absolute}
  .why-teaser .wt-in>h2{grid-row:2/span 2;margin-top:14px!important}
  .why-teaser .wt-in>.wt-lede{grid-row:2;margin-top:22px!important}
  .why-teaser .wt-in>.wt-ctas{grid-row:3;align-self:start}
}
.why-teaser .wt-k,.os-band .kick-amber,.walk-band .kick-amber{display:block;margin-bottom:14px}
/* 08 How I run things: one number per card (the large one), and room under the heading */
.os-card>b{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.os-band h2{margin-bottom:36px!important}
/* 09 The walk and the water: the footprints close the section */
.walk-band .walksteps{margin-bottom:0!important}
@media screen{section.walk-band>.inw{padding-bottom:calc(var(--s-pad,96px)*.55)!important}}
/* 06 About on a phone: the 2x2 stats close cleanly, no rule hanging under the last row */
@media screen and (max-width:860px){#about .stats .stat:nth-last-child(-n+2){border-bottom:0}}
/* 05 Press: the kit card rides along beside the long record list */
@media screen and (min-width:861px){.hx-pgrid{align-items:start}.hx-pgrid>.hx-kit{position:sticky;top:96px}}