/* ==========================================================================
   INNER PAGES

   The components the inner pages add on top of the home page's band system:
   the page head, breadcrumbs, case-study cards and their filters, the long-form
   prose column with its aside, the detail-page furniture (glance, through the
   pathway, what changed, how to cite, previous / next), the closing call to
   action, and the contact form.

   Ported from the approved prototype (assets/css/site.css in the static build)
   with its .band selectors rewritten to this theme's .masm-band. The prototype
   uses short token names; tokens.css maps them onto the --masm-* tokens so the
   rules below could be carried over unchanged and stay comparable with the
   prototype they came from.
   ========================================================================== */

.skip { position:absolute;left:-9999px }
.skip:focus { left:12px;top:12px;z-index:100;background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:2px }
.btn { display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-size:16px; background:var(--ink);color:var(--paper);padding:15px 30px;border-radius:999px; transition:background .25s,transform .25s,box-shadow .25s; }
.btn:hover { background:#0a1c36;color:var(--paper);transform:translateY(-2px);box-shadow:0 10px 24px -14px rgba(17,41,75,.7) }
.btn .dot { width:7px;height:7px;border-radius:50%;background:var(--ochre) }
.links-lbl { font-family:var(--stamp);font-size:11px;letter-spacing:.15em;color:var(--ink-faint);margin-right:4px }
.shot.wide img { aspect-ratio:3/2 }
.plate { position:relative;background: repeating-linear-gradient(135deg,rgba(17,41,75,.045) 0 10px,transparent 10px 20px),var(--paper-deep); border:1px solid var(--rule);border-radius:3px; display:flex;flex-direction:column;justify-content:flex-end;padding:22px; aspect-ratio:1/1; }
.plate.wide { aspect-ratio:16/10 }
.plate.tall { aspect-ratio:4/5 }
.plate-tag { position:absolute;top:16px;left:16px;font-family:var(--stamp);font-size:11px;letter-spacing:.14em; color:var(--rust);background:var(--paper);border:1px solid var(--rule);padding:5px 10px;border-radius:2px; }
.plate-brief { font-size:14.5px;line-height:1.5;color:var(--ink-soft);max-width:44ch }
.plate-spec { font-size:12.5px;color:var(--ink-faint);margin-top:8px;font-family:var(--stamp);letter-spacing:.07em }
.relation .card-link { margin-top:16px }
.btn-light { display:inline-flex;align-items:center;gap:10px;background:var(--ochre);color:#20130B; text-decoration:none;padding:15px 30px;border-radius:999px;font-size:16px; transition:transform .25s,background .25s; }
.btn-light:hover { background:#e9b23c;color:#20130B;transform:translateY(-2px) }
.reveal { opacity:0;transform:translateY(14px) }
.loaded .reveal { opacity:1;transform:none;transition:opacity .85s cubic-bezier(.2,.7,.3,1),transform .85s cubic-bezier(.2,.7,.3,1) }
.loaded .r1 { transition-delay:.10s }
.loaded .r2 { transition-delay:.22s }
.loaded .r3 { transition-delay:.34s }
.loaded .r4 { transition-delay:.46s }
@media (max-width:860px) {
	.btn { width:100%;justify-content:center }
}
@media (prefers-reduced-motion:reduce) {
	.reveal { opacity:1;transform:none }
}
.page-head { position:relative;overflow:hidden;background:var(--paper-deep); padding-top:calc(154px + clamp(26px,3.2vw,46px));padding-bottom:clamp(30px,3.4vw,50px); border-bottom:1px solid var(--rule); }
/* --------------------------------------------------------------------------
   The dotted rule beside the page head

   The prototype hangs this rule 26px to the left of the content column. On the
   live site the logo carries its own dotted strip at the start of the content
   column, and the two motifs read as misaligned, so the rule is pulled in to
   sit directly under it. This is a deliberate departure from the prototype -
   if you are diffing the two, this is why they differ.
   -------------------------------------------------------------------------- */
.page-head::before { content:"";position:absolute;z-index:2;top:calc(154px + 26px);bottom:28px;width:4px; left:calc(max(var(--gut),(100% - var(--max))/2 + var(--gut))); background:radial-gradient(circle,var(--sky) 1.6px,transparent 2px) 0 0/4px 9px repeat-y;opacity:.75; }
.page-head .wrap { position:relative;z-index:2 }
.ph-text { max-width:min(560px,calc(50% - 40px)) }
.ph-art { position:absolute;z-index:1;top:154px;right:0;bottom:0;width:50%;margin:0; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M100 0 L100 100 L2.63 100.0 L4.15 97.06 L3.71 94.12 L1.95 91.18 L3.39 88.24 L4.68 85.29 L3.96 82.35 L4.45 79.41 L5.14 76.47 L4.91 73.53 L2.7 70.59 L7.35 67.65 L3.19 64.71 L3.85 61.76 L5.85 58.82 L5.0 55.88 L5.52 52.94 L4.36 50.0 L5.39 47.06 L5.0 44.12 L4.41 41.18 L7.21 38.24 L6.03 35.29 L4.68 32.35 L5.21 29.41 L6.94 26.47 L10.37 23.53 L6.42 20.59 L6.7 17.65 L9.29 14.71 L7.29 11.76 L5.17 8.82 L8.6 5.88 L5.51 2.94 L8.91 0.0 Z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M100 0 L100 100 L2.63 100.0 L4.15 97.06 L3.71 94.12 L1.95 91.18 L3.39 88.24 L4.68 85.29 L3.96 82.35 L4.45 79.41 L5.14 76.47 L4.91 73.53 L2.7 70.59 L7.35 67.65 L3.19 64.71 L3.85 61.76 L5.85 58.82 L5.0 55.88 L5.52 52.94 L4.36 50.0 L5.39 47.06 L5.0 44.12 L4.41 41.18 L7.21 38.24 L6.03 35.29 L4.68 32.35 L5.21 29.41 L6.94 26.47 L10.37 23.53 L6.42 20.59 L6.7 17.65 L9.29 14.71 L7.29 11.76 L5.17 8.82 L8.6 5.88 L5.51 2.94 L8.91 0.0 Z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat; }
.ph-art img { width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%); filter:saturate(.8) sepia(.12) contrast(1.03); transform:scale(1.04);transition:transform 1.6s cubic-bezier(.22,.7,.28,1); }
.loaded .ph-art img { transform:scale(1) }
.ph-art::before { content:"";position:absolute;inset:0;z-index:1;background:var(--c,var(--rust));mix-blend-mode:multiply;opacity:.16;pointer-events:none; }
.ph-art::after { content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background: linear-gradient(90deg,rgba(239,229,208,.55) 0%,rgba(239,229,208,0) 22%), linear-gradient(180deg,rgba(17,41,75,0) 62%,rgba(17,41,75,.42) 100%); }
.ph-cap,\n.page-head .ph-art figcaption { position:absolute;z-index:2;right:max(var(--gut),calc((100vw - var(--max))/2 + var(--gut)));bottom:16px; display:flex;align-items:center;gap:9px; font-family:var(--stamp);font-size:11.5px;letter-spacing:.15em;color:#FDFAF2;text-shadow:0 1px 8px rgba(0,0,0,.35); }
.ph-cap span { width:8px;height:8px;border-radius:50%;background:var(--c,var(--rust));box-shadow:0 0 0 2px rgba(253,250,242,.85) }
.crumbs { list-style:none;margin:0 0 18px;padding:0;display:flex;flex-wrap:wrap;gap:4px 10px;font-size:13.5px;color:var(--ink-faint) }
.crumbs li { display:flex;align-items:center;gap:10px }
.crumbs li + li::before { content:"/";color:var(--rule) }
.crumbs li[aria-current] { max-width:30ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block }
.crumbs li[aria-current]::before { margin-right:10px }
.crumbs a { text-decoration:none;color:var(--ink-soft);border-bottom:1px solid transparent }
.crumbs a:hover { color:var(--ink);border-bottom-color:var(--rust-ink) }
.page-head .eyebrow { margin-bottom:14px;color:var(--c-ink,var(--rust-ink)) }
.page-head .eyebrow::before { background:var(--c,var(--rust-ink)) }
.page-head h1 { font-size:clamp(32px,3.6vw,48px);line-height:1.08;letter-spacing:-.022em;margin-bottom:16px }
.page-head.is-detail h1 { font-size:clamp(28px,3.1vw,42px);line-height:1.12 }
.page-head h1 em { font-style:italic;font-weight:400;color:var(--c-ink,var(--rust-ink)) }
.page-head .lede { font-size:clamp(16.5px,1.3vw,19px);color:var(--ink-soft);margin:0;max-width:52ch }
.page-head .detail-meta { margin-top:20px;padding-top:14px }
@media (max-width:860px) {
	.page-head { padding-top:126px;padding-bottom:30px }
	.page-head::before { display:none }
	.ph-text { max-width:none }
	.ph-art { position:relative;top:auto;width:auto;height:clamp(170px,46vw,260px);margin-bottom:22px; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0 L100 0 L100.0 91.97 L96.15 91.53 L92.31 91.93 L88.46 88.9 L84.62 92.24 L80.77 89.04 L76.92 91.43 L73.08 95.55 L69.23 95.46 L65.38 93.27 L61.54 94.08 L57.69 96.36 L53.85 93.32 L50.0 91.42 L46.15 94.46 L42.31 92.61 L38.46 92.32 L34.62 96.38 L30.77 93.27 L26.92 92.85 L23.08 95.66 L19.23 94.26 L15.38 91.82 L11.54 93.43 L7.69 92.77 L3.85 89.36 L0.0 91.52 Z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0 L100 0 L100.0 91.97 L96.15 91.53 L92.31 91.93 L88.46 88.9 L84.62 92.24 L80.77 89.04 L76.92 91.43 L73.08 95.55 L69.23 95.46 L65.38 93.27 L61.54 94.08 L57.69 96.36 L53.85 93.32 L50.0 91.42 L46.15 94.46 L42.31 92.61 L38.46 92.32 L34.62 96.38 L30.77 93.27 L26.92 92.85 L23.08 95.66 L19.23 94.26 L15.38 91.82 L11.54 93.43 L7.69 92.77 L3.85 89.36 L0.0 91.52 Z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat; }
	.ph-art::after { background:linear-gradient(180deg,rgba(17,41,75,0) 55%,rgba(17,41,75,.45) 100%) }
	.ph-cap { right:var(--gut);bottom:22px }
	.crumbs li[aria-current] { max-width:20ch }
}
.prose { max-width:68ch }
.prose h2 { font-size:clamp(25px,2.8vw,34px);line-height:1.18;margin:clamp(34px,4vw,52px) 0 16px }
.prose h2:first-child { margin-top:0 }
.prose h3 { font-size:22px;margin:30px 0 10px }
.prose p,.prose li { color:var(--ink-soft) }
.prose strong { color:var(--ink);font-weight:500 }
.prose ul { padding-left:1.1em;margin:0 0 1.1em }
.prose li { margin-bottom:6px }
.prose li::marker { color:var(--c,var(--rust)) }
.split { display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.72fr);gap:clamp(28px,5vw,80px);align-items:start }
.aside { position:sticky;top:180px;display:grid;gap:18px }
.aside-box { background:#FDFAF2;border:1px solid var(--rule);border-radius:4px;padding:22px 24px }
.aside-box h3 { font-family:var(--stamp);font-weight:500;font-size:12px;letter-spacing:.15em;color:var(--c-ink,var(--rust-ink));margin:0 0 12px }
.aside-box ul { list-style:none;margin:0;padding:0;font-size:15.5px }
.aside-box li { padding:8px 0;border-top:1px solid var(--rule) }
.aside-box li:first-child { border-top:0;padding-top:0 }
.aside-box a { color:var(--ink-soft);text-decoration:none }
.aside-box a:hover { color:var(--ink);text-decoration:underline;text-underline-offset:3px }
.aside-box p { font-size:15px;color:var(--ink-soft);margin:0 }
.todo { display:flex;gap:12px;align-items:flex-start;margin:22px 0;padding:14px 18px; background:repeating-linear-gradient(135deg,rgba(17,41,75,.035) 0 10px,transparent 10px 20px),#FDFAF2; border:1px dashed var(--rule);border-radius:4px;font-size:15px;color:var(--ink-faint); }
.todo::before { content:"In preparation";flex:0 0 auto;font-family:var(--stamp);font-size:10.5px;letter-spacing:.14em;color:var(--rust-ink);padding-top:3px }
.btn-ghost { display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-size:15px;color:var(--ink); border:1px solid var(--ink);padding:11px 22px;border-radius:999px;transition:background .25s,color .25s,transform .25s; }
.btn-ghost:hover { background:var(--ink);color:var(--paper);transform:translateY(-1px) }
.btn-ghost .ar { color:var(--c-ink,var(--rust-ink));transition:color .25s }
.btn-ghost:hover .ar { color:var(--ochre) }
.chip { display:inline-flex;align-items:center;gap:7px;font-size:13px;line-height:1.2;color:var(--ink-soft); border:1px solid var(--rule);border-radius:999px;padding:4px 11px 4px 9px;text-decoration:none;background:transparent; }
.chip::before { content:"";width:7px;height:7px;border-radius:50%;background:var(--k,var(--rule)) }
a.chip:hover { border-color:var(--k);color:var(--ink);background:#FDFAF2 }
.chip.tag::before { border-radius:1px;transform:rotate(45deg);width:6px;height:6px }
.filters { display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:clamp(26px,3vw,38px) 0 clamp(22px,2.6vw,30px) }
.filters .links-lbl { margin-right:6px }
.filters .link-chip[aria-pressed="true"] { background:var(--ink);border-color:var(--ink);color:var(--paper) }
.filters .link-chip[aria-pressed="true"]::before { box-shadow:0 0 0 1.5px var(--paper) }
.filter-empty { font-size:16px;color:var(--ink-faint);padding:26px 0 }
.cases { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,30px) }
.case { display:flex;flex-direction:column;background:#FDFAF2;border:1px solid var(--rule);border-radius:4px;overflow:hidden;transition:transform .3s,box-shadow .3s }
.case:hover { transform:translateY(-3px);box-shadow:0 30px 56px -46px rgba(17,41,75,.9) }
.case .plate { border:0;border-bottom:1px solid var(--rule);border-radius:0;aspect-ratio:3/2;padding:16px }
.case .plate::after { content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:var(--k,var(--rust)) }
.case-body { padding:20px 22px 22px;display:flex;flex-direction:column;flex:1 }
.case-meta { display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px }
.case h3 { font-size:21px;line-height:1.25;margin:0 0 10px }
.case-body p { font-size:15.5px;color:var(--ink-soft);flex:1;margin-bottom:16px }
.case .status { margin-top:0 }
.res .plate { aspect-ratio:1/1;padding:0;justify-content:center;align-items:center;font-family:var(--stamp);font-size:11px;letter-spacing:.12em;color:var(--rust-ink) }
.voice blockquote.ph { color:var(--ink-faint);font-style:italic }
.voice.lead { grid-column:1/-1;background:var(--paper) }
.voice.lead blockquote { font-size:clamp(23px,2.5vw,32px);max-width:40ch }
.stage-row .prose p { font-size:17px }
.person .plate { aspect-ratio:4/5;padding:14px }
.cite-box { position:relative;background:var(--paper);border:1px solid var(--rule);border-left:3px solid var(--c,var(--sky));border-radius:4px;padding:22px 24px 18px;margin:16px 0 26px }
.cite-box p { font-family:var(--serif);font-size:18px;line-height:1.5;color:var(--ink);margin:0 0 14px }
.cite-fmt { font-family:var(--stamp);font-size:11px;letter-spacing:.15em;color:var(--ink-faint);margin:0 0 8px!important;font-size:11px!important }
.copy-btn { -webkit-appearance:none;appearance:none;font:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:8px; font-size:13.5px;color:var(--ink-soft);background:none;border:1px solid var(--rule);border-radius:999px;padding:5px 14px; transition:border-color .25s,color .25s; }
.copy-btn:hover { border-color:var(--ink);color:var(--ink) }
.copy-btn.done { border-color:var(--sage);color:var(--sage-ink) }
.form { display:grid;gap:18px }
.form-row { display:grid;grid-template-columns:1fr 1fr;gap:18px }
.field label { display:block;font-family:var(--stamp);font-size:11.5px;letter-spacing:.14em;color:var(--ink-faint);margin-bottom:8px }
.field input,.field select,.field textarea { width:100%;font:inherit;font-size:16px;color:var(--ink);background:#FDFAF2; border:1px solid var(--rule);border-radius:4px;padding:13px 15px;transition:border-color .2s,box-shadow .2s; }
.field textarea { min-height:160px;resize:vertical }
.field input:focus,.field select:focus,.field textarea:focus { outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(17,41,75,.08) }
.form .btn { border:0;cursor:pointer;font:inherit;font-size:16px;justify-self:start }
.form-note { font-size:14px;color:var(--ink-faint);margin:0 }
.form-done { background:#FDFAF2;border:1px solid var(--rule);border-left:3px solid var(--sage);border-radius:4px;padding:18px 22px;color:var(--ink-soft) }
.next-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,26px);margin-top:28px }
.cta-band .cta-in { display:grid;grid-template-columns:minmax(0,1.2fr) auto;gap:24px 48px;align-items:center }
.cta-band h2 { font-size:clamp(26px,3.2vw,40px);line-height:1.15;max-width:24ch }
.cta-band p { margin:14px 0 0;max-width:58ch }
.cta-band .cta-actions { display:flex;flex-wrap:wrap;gap:14px 22px;align-items:center }
.cta-band .text-link { color:#FDFAF2;border-bottom-color:var(--ochre) }
.cta-band .text-link:hover { color:var(--ochre) }
@media (max-width:1080px) {
	.split { grid-template-columns:1fr }
	.aside { position:static }
	.cases,.next-grid { grid-template-columns:1fr 1fr }
	.cta-band .cta-in { grid-template-columns:1fr }
}
@media (max-width:860px) {
	.cases,.next-grid,.voices,.ways,.form-row { grid-template-columns:1fr }
	.form .btn { width:100% }
	.todo { flex-direction:column;gap:4px }
}
.sr { position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap }
.hp { position:absolute;left:-9999px }
.ph-copy { color:var(--ink-faint)!important;font-style:italic }
.ph-inline { color:var(--ink-faint);font-style:italic }
.is-disabled { opacity:.55;pointer-events:none }
.filters-2 { margin-top:-14px }
.case { position:relative }
.case h3 a { text-decoration:none;color:inherit }
.case h3 a.stretch::after { content:"";position:absolute;inset:0;z-index:1 }
.case:focus-within { box-shadow:0 0 0 2px var(--ink) }
.case-foot { display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:14px;border-top:1px solid var(--rule);font-size:13.5px;color:var(--ink-faint) }
.case-foot .read { display:inline-flex;align-items:center;gap:6px;color:var(--ink);font-size:14px }
.case-foot .read svg { width:12px;height:12px;color:var(--k);transition:transform .25s }
.case:hover .case-foot .read svg { transform:translateX(3px) }
.chip.lvl::before { border-radius:1px;background:var(--ink-faint) }
.detail-meta { display:flex;flex-wrap:wrap;gap:12px 34px;margin-top:26px;padding-top:18px;border-top:1px solid var(--rule);font-size:15px;color:var(--ink) }
.detail-meta b { display:block;font-family:var(--stamp);font-weight:500;font-size:11px;letter-spacing:.15em;color:var(--c-ink,var(--ink-faint));margin-bottom:3px }
.detail-hero { aspect-ratio:16/7;margin-top:6px }
.throughs { display:grid;gap:14px;margin:6px 0 10px }
.through { background:#FDFAF2;border:1px solid var(--rule);border-left:3px solid var(--c);border-radius:4px;padding:16px 20px 4px }
.through-head { display:flex;align-items:center;gap:12px;margin-bottom:8px }
.through-head img { width:40px;height:40px;border-radius:50%;box-shadow:0 0 0 2px var(--c) }
.prose .through h3 { margin:0;font-size:21px }
.through h3 span { font-family:var(--stamp);font-size:11.5px;letter-spacing:.14em;color:var(--c-ink);margin-left:8px }
.prose ul.changed { list-style:none;padding:0;border-top:1px solid var(--rule) }
.changed li { display:grid;grid-template-columns:170px 1fr;gap:16px;padding:12px 0;border-bottom:1px solid var(--rule);margin:0 }
.changed li b { font-family:var(--serif);font-weight:500;font-size:17px;color:var(--ink) }
.changed li p { margin:0 }
.glance { margin:0;display:grid;gap:4px }
.glance dt { font-family:var(--stamp);font-size:11px;letter-spacing:.14em;color:var(--ink-faint);margin-top:10px }
.glance dt:first-child { margin-top:0 }
.glance dd { margin:0;font-size:15.5px;color:var(--ink) }
.glance .res-tags { margin-top:4px }
.aside-box ul.rel li { display:flex;flex-direction:column;gap:2px }
.aside-box ul.rel li span { font-family:var(--stamp);font-size:10.5px;letter-spacing:.14em;color:var(--ink-faint) }
.pn-row { display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:clamp(40px,5vw,64px);padding-top:24px;border-top:1px solid var(--rule) }
.pn { display:block;text-decoration:none;padding:16px 20px;border:1px solid var(--rule);border-radius:4px;background:#FDFAF2;transition:border-color .25s,transform .25s }
.pn:hover { border-color:var(--c,var(--rust));transform:translateY(-2px) }
.pn span { display:block;font-family:var(--stamp);font-size:11px;letter-spacing:.14em;color:var(--ink-faint);margin-bottom:6px }
.pn b { font-family:var(--serif);font-weight:500;font-size:18px;line-height:1.3;color:var(--ink) }
.pn-older { text-align:right }
.download-card .plate { aspect-ratio:3/4;padding:0 }
.download-card .btn { padding:11px 22px;font-size:15px }
.btn-ghost svg { width:16px;height:16px }
.hub-search { display:flex;align-items:center;max-width:560px;margin-bottom:6px;background:#FDFAF2;border:1px solid var(--rule);border-radius:999px;padding:4px 4px 4px 20px;transition:border-color .2s,box-shadow .2s }
.hub-search:focus-within { border-color:var(--ink);box-shadow:0 0 0 3px rgba(17,41,75,.08) }
.hub-search input { flex:1;min-width:0;border:0;background:none;font:inherit;font-size:16px;color:var(--ink);padding:10px 0;outline:none }
.hub-search button { flex:0 0 auto;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;border:0;background:var(--ink);color:var(--paper);cursor:pointer }
.hub-search button svg { width:18px;height:18px }
.hub-search.big { max-width:720px }
.hub-search.big input { font-size:19px;padding:14px 0 }
@media (max-width:860px) {
	.changed li { grid-template-columns:1fr;gap:4px }
	.pn-row { grid-template-columns:1fr }
	.pn-older { text-align:left }
	.detail-hero { aspect-ratio:3/2 }
	.filters-2 { margin-top:-10px }
}
/* --------------------------------------------------------------------------
   Two adjustments the port needs to sit inside this theme
   -------------------------------------------------------------------------- */

/* 1 - .wrap is defined inside .masm-band in sections.css, but the page head is
   not a band, so it needs the content column itself. */
.page-head .wrap {
	max-width: var(--max);
	margin-inline: auto;
	padding-inline: var(--gut);
	box-sizing: border-box;
}

/* 2 - the prototype hides .reveal until its script adds .loaded. If that class
   never arrives the text stays invisible, so the hidden state is applied only
   when scripts are running (html.masm-js, set in the document head) and
   entries.js adds .loaded on the next frame. Without JavaScript everything is
   simply visible. */
.reveal {
	opacity: 1;
	transform: none;
}

html.masm-js .reveal {
	opacity: 0;
	transform: translateY(14px);
}

html.masm-js.loaded .reveal {
	opacity: 1;
	transform: none;
	transition: opacity .85s cubic-bezier(.2, .7, .3, 1), transform .85s cubic-bezier(.2, .7, .3, 1);
}

@media (prefers-reduced-motion: reduce) {
	html.masm-js .reveal {
		opacity: 1;
		transform: none;
	}
}
/* --------------------------------------------------------------------------
   The page-head image as a builder element

   In the prototype the image is a hand-written <figure class="ph-art">. Here it
   is the builder's Image element with ph-art as its extra class, so the client
   can swap the picture with the media picker. These three rules let that
   element sit where the figure did; its caption comes from the Caption field in
   the Media library.
   -------------------------------------------------------------------------- */
.page-head .ph-art .spb-image {
	margin: 0;
	height: 100%;
}

.page-head .ph-art .spb-image img {
	display: block;
}

/* The builder puts its 24px element gap between the image and the text. */
.page-head {
	--spb-el-gap: 0px;
}
/* --------------------------------------------------------------------------
   The page head sits underneath the fixed header

   site.css pads the body by the header's height so ordinary pages start below
   it. The page head does that itself - its top padding already allows for the
   header, exactly as in the prototype - so on these pages the body padding is
   removed, or the header's height would be counted twice and leave a band of
   empty paper above the hero. This mirrors what hero.css does for the home page.
   -------------------------------------------------------------------------- */
body:has(.page-head) {
	padding-top: 0;
}

/* Track the real header height rather than the prototype's fixed 154px.
   Desktop only: below 860px the design stacks the photograph above the text and
   sets its own, smaller top padding, so that rule is left alone. */
@media (min-width: 861px) {
	.page-head {
		padding-top: calc(var(--masm-header-h, 154px) + clamp(26px, 3.2vw, 46px));
	}

	.page-head::before {
		top: calc(var(--masm-header-h, 154px) + 26px);
	}

	.page-head .ph-art {
		top: var(--masm-header-h, 154px);
	}
}
/* --------------------------------------------------------------------------
   A card with a real photograph

   The prototype's cards all use the hatched .plate placeholder. Once an entry
   has a Featured image the card shows it instead, cropped to the same 3:2
   field-photograph shape the placeholder announces.
   -------------------------------------------------------------------------- */
.case .case-shot {
	margin: 0;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	border-radius: 3px;
	background: var(--paper-deep);
}

.case .case-shot img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s cubic-bezier(.22, .7, .28, 1);
}

.case:hover .case-shot img {
	transform: scale(1.03);
}
/* --------------------------------------------------------------------------
   No dotted rule in the inner hero

   The prototype marked the inner hero with a vertical dotted rule at the start
   of the content column (.page-head::before, further up this file). It was
   dropped on review, so the hero text now begins at the column edge itself,
   in line with the logo above it and with every band below. The rule is left
   in the file and switched off here rather than deleted, so the decision is
   visible to whoever reads this next.
   -------------------------------------------------------------------------- */
.page-head::before {
	display: none;
}

.page-head .ph-text {
	padding-left: 0;
}
/* --------------------------------------------------------------------------
   Where the hero photograph is cropped

   The hero art sits in a wide, shallow box (about 2:1) while most of what the
   client uploads is a portrait or a head-and-shoulders photograph. Cropping
   from the centre cuts the top of the head off, so the default crop is pulled
   up towards the top of the picture.

   Each page can override it: Page hero - Photograph focus in the page editor
   sets --pos on the band, and this is only the fallback.
   -------------------------------------------------------------------------- */
.page-head .ph-art img,
.page-head .ph-art .spb-image img {
	object-position: var(--pos, 50% 22%);
}