/* Painted devices and a painted route share the same paper-based visual language. */
.sharing-heading { align-items:flex-end; margin-bottom:38px; }
.sharing-heading .section-summary { max-width:420px; font-size:18px; line-height:1.9; }
.sharing-steps { list-style:none; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:34px; padding:24px 0; margin:0 0 32px; border-top:1px solid #c5c9ba; border-bottom:1px solid #c5c9ba; }
.sharing-steps li { display:flex; align-items:flex-start; gap:16px; padding-right:14px; }
.sharing-step-index { color:#9b7757; font:26px/1.4 var(--serif); }
.sharing-steps h3 { font-size:23px; font-weight:400; margin-bottom:5px; }
.sharing-steps p { font-size:16px; line-height:1.85; color:var(--muted); }
.sharing-reader { display:grid; grid-template-columns:minmax(0,1fr) minmax(230px,.32fr); gap:clamp(28px,4vw,60px); align-items:center; }
.sharing-art,.sharing-navigation-art { position:relative; min-width:0; width:100%; margin:0; }
.sharing-image-stage { position:relative; aspect-ratio:3/2; width:100%; }
.share-painting,.navigation-painting { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:contain; pointer-events:none; mix-blend-mode:multiply; }
.share-painting { opacity:0; transition:opacity 680ms ease; }
.share-painting.is-active { opacity:1; }
.navigation-painting[hidden] { display:none; }
.sharing-caption { text-align:center; color:#7e8472; min-height:28px; font-size:14px; line-height:1.8; margin:10px 0 0; }
.sharing-view-copy { min-width:0; }
.sharing-view-copy>.eyebrow { margin-bottom:20px; font-size:16px; }
.sharing-views { display:flex; flex-direction:column; gap:0; }
.sharing-views button { display:flex; justify-content:space-between; align-items:center; width:100%; gap:10px; padding:17px 4px; min-height:64px; border:0; border-bottom:1px solid #bec4b2; background:transparent; text-align:left; font:24px/1.5 var(--serif); transition:color 180ms,transform 180ms; }
.sharing-views button>span:last-child { color:#aeb6a3; }
.sharing-views button[aria-pressed=true],.sharing-views button[aria-pressed=true]>span:last-child,.sharing-views button:hover { color:#966c4d; }
.sharing-views button:active { transform:translateY(-2px); }
.sharing-view-note { min-height:136px; margin-top:30px; }
.sharing-view-note[hidden] { display:none; }
.sharing-view-note h3 { font:22px/1.6 var(--serif); margin-bottom:10px; }
.sharing-view-note p,.sharing-noscript { color:var(--muted); font-size:16px; line-height:1.9; }
.sharing-ownership { display:flex; gap:22px; align-items:flex-start; border-top:1px solid #c5c9ba; padding-top:26px; margin-top:34px; }
.sharing-ownership>svg { flex:none; width:27px; height:30px; margin-top:4px; color:#7c896c; }
.sharing-ownership h3 { font:25px/1.55 var(--serif); margin-bottom:10px; }
.sharing-ownership p { font-size:17px; line-height:1.9; color:var(--muted); }
.sharing-navigation { display:grid; grid-template-columns:minmax(0,.68fr) minmax(0,1fr); align-items:center; gap:clamp(30px,5vw,80px); padding-top:clamp(50px,6vw,96px); margin-top:clamp(25px,4vw,56px); border-top:1px solid #c5c9ba; }
.sharing-navigation-copy>h3 { font:clamp(29px,2.7vw,40px)/1.5 var(--serif); margin:0 0 23px; }
.sharing-navigation-copy>p:not(.eyebrow) { font-size:18px; color:var(--muted); line-height:1.9; }
.sharing-navigation-steps { list-style:decimal; padding-left:25px; margin:28px 0 0; }
.sharing-navigation-steps li { padding-left:7px; margin-bottom:18px; color:#8a775b; font:19px/1.6 var(--serif); }
.sharing-navigation-steps strong { display:block; font-weight:400; color:var(--ink); font-size:19px; }
.sharing-navigation-steps span { display:block; font:16px/1.9 var(--sans); color:var(--muted); margin-top:3px; }
.sharing-image-error { position:absolute; inset:0; display:flex; flex-direction:column; gap:16px; align-items:center; justify-content:center; text-align:center; padding:20px; color:var(--muted); }
.sharing-image-error[hidden] { display:none; }
.sharing-image-error p { font-size:17px; }
.sharing-image-error button { min-height:44px; font-size:16px; padding:9px 22px; border:1px solid #9ca78f; background:#f7f4ed; }
.sharing-navigation-art .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
@media(max-width:980px) {
  .sharing-steps { gap:22px; }
  .sharing-steps li { gap:10px; padding:0; }
  .sharing-reader { grid-template-columns:minmax(0,1fr) 215px; gap:25px; }
  .sharing-view-note h3 { font-size:21px; }
  .sharing-navigation { grid-template-columns:1fr 1.1fr; gap:28px; }
  .sharing-navigation-copy>p:not(.eyebrow) { font-size:17px; }
}
@media(max-width:700px) {
  .sharing-heading { display:block; margin-bottom:27px; }
  .sharing-heading .section-summary { margin-top:22px; font-size:16px; }
  .sharing-steps { grid-template-columns:1fr; gap:20px; padding:22px 0; margin-bottom:24px; }
  .sharing-steps li { gap:17px; }
  .sharing-steps h3 { font-size:22px; margin-bottom:2px; }
  .sharing-step-index { min-width:24px; }
  .sharing-reader { display:flex; flex-direction:column; gap:20px; }
  .sharing-view-copy { width:100%; order:-1; }
  .sharing-view-copy>.eyebrow { margin-bottom:9px; }
  .sharing-views { flex-direction:row; gap:24px; }
  .sharing-views button { min-height:54px; font-size:22px; padding:9px 0; }
  .sharing-view-note { min-height:0; margin-top:20px; }
  .sharing-view-note h3 { margin-bottom:4px; font-size:21px; }
  .sharing-ownership { gap:14px; padding-top:23px; margin-top:25px; }
  .sharing-ownership>svg { width:23px; height:25px; }
  .sharing-ownership h3 { font-size:23px; }
  .sharing-ownership p { font-size:16px; }
  .sharing-navigation { display:flex; flex-direction:column; gap:22px; padding-top:42px; margin-top:46px; }
  .sharing-navigation-copy { width:100%; }
  .sharing-navigation-copy>p:not(.eyebrow) { font-size:16px; }
  .sharing-navigation-steps { margin-top:24px; }
  .sharing-caption { font-size:13px; margin-top:8px; }
  .sharing-image-error { padding:10px; gap:10px; }
  .sharing-image-error p { font-size:16px; }
}
@media(max-width:350px) { .sharing-views {gap:15px;} .sharing-views button {font-size:20px;} }
@media(prefers-reduced-motion:reduce) { .share-painting,.sharing-views button {transition:none;} .sharing-views button:active {transform:none;} }
@media(forced-colors:active) { .sharing-views button[aria-pressed=true] {color:Highlight; border-bottom:3px solid Highlight;} }