/* Cards craft · shared finishing. All panel changes start above 800px. */
@media (min-width:801px) {
  .drawer {padding:16px 0 8px}
  .strip {gap:16px;--card-width:560px;--card-height:400px}
  .strip::after {flex:0 0 calc(100% - var(--card-width) - 16px)}
  .panel,.panel.portrait-film {flex:0 0 var(--card-width);height:var(--card-height);min-height:var(--card-height);padding:26px;border:0;border-radius:8px;background:#eaece5;color:var(--ink);isolation:isolate}
  .panel::after {content:'';position:absolute;inset:0;border:1px solid #ffffff55;border-radius:inherit;box-shadow:inset 0 0 0 1px #29313716;pointer-events:none;z-index:5}
  .panel h3 {font-size:29px;line-height:1.1;margin:0;letter-spacing:-.035em}
  .panel .button {border-radius:30px;background:var(--ochre);border-color:var(--ochre);color:#20272b;font-size:16px;min-height:44px;padding:10px 18px;gap:10px}
  .panel .button:hover {background:#ce9238}
  .panel .button svg {width:20px;height:20px}
  .panel .media-frame,.panel .screens {margin:0;min-height:0}
  .panel .inspect-image {width:100%;max-width:none;border-radius:0}
  .panel .inspect-image img {border-radius:0;object-fit:cover}
  .panel .enlarge {top:14px;right:14px;bottom:auto;width:32px;height:32px}
  .panel .media-caption,.panel>.disclosure {font-size:14px;line-height:1.4;margin:0;text-align:left}
  .strip-position {padding:6px 24px 0;gap:26px}
  .position {font-size:15px}
  .segments {max-width:320px;margin:0}
  .segment span {height:3px}
  .panel .end-content {margin:auto 0 0;max-width:100%}
  .panel .end-content h4 {font-size:46px;line-height:1.02;margin-bottom:16px;letter-spacing:-.045em}
  .panel .end-content>p {font-size:18px;line-height:1.4}
  .panel .end-content>.button {margin-top:20px}
  .panel .end-content>.small {font-size:14px;margin-top:10px}
  .panel .editions>div {padding:15px 0}
  .panel .editions h4 {font-size:33px}
  .panel .editions p {font-size:16px;margin-top:3px}
  .panel .dispatch>div {padding:16px 0;grid-template-columns:28px 1fr}
  .panel .dispatch h4 {font-size:24px;line-height:1.15}
  .panel .dispatch p {font-size:15px;margin-top:3px;line-height:1.3}
  .panel .range-end>div {padding:18px 0}
  .panel .range-end h4 {font-size:28px;margin-bottom:7px}
  .panel .range-end p {font-size:16px;line-height:1.3}
  .panel .range-end .small {font-size:14px;margin-top:5px}
  .panel .range-end .button {margin-top:14px}
}

/* Both call treatments share their state machine, controls and disclosure. */
#call-dialog {padding:0;overflow:auto;text-align:center;color:#f4f4f0;background:#2c3438;max-width:calc(100vw - 32px);max-height:calc(100svh - 32px);border:1px solid #ffffff40;border-radius:20px;box-shadow:0 24px 80px #0e18184d;isolation:isolate}
#call-dialog::backdrop {background:#20282b91;backdrop-filter:blur(7px)}
#call-dialog button:focus-visible,#call-dialog a:focus-visible,#call-dialog summary:focus-visible {outline:2px solid #f5e2bc;outline-offset:4px}
.call-heading {display:flex;justify-content:space-between;align-items:center;padding:24px;font-size:13px;line-height:1.2;text-align:left;position:relative;z-index:2}
#call-phase {display:flex;align-items:center;gap:8px}
#call-phase i {width:6px;height:6px;border-radius:50%;background:#d4a558;flex-shrink:0}
#call-timer {font-size:13px;font-variant-numeric:tabular-nums}
#call-dialog h2 {font-family:var(--serif);font-size:32px;font-weight:400;line-height:1.05;letter-spacing:-.025em;margin:0}
#call-role {font-size:14px;line-height:1.35;margin:7px 0 0;color:#e0e4df}
#call-status {font-size:14px;line-height:1.45;margin:0;min-height:40px;color:#e5e7e2}
.call-controls {display:flex;justify-content:center;align-items:flex-start;gap:32px}
.call-controls button {display:flex;align-items:center;justify-content:center;font-size:14px;line-height:1.2;padding:0}
.call-pickup {background:#c89139;color:#20272b}
.call-pickup:hover {background:#dfa84c}
.call-dismiss {background:#ffffff16;color:#f2f3ee;border:1px solid #ffffff2b}
.call-dismiss:hover {background:#ffffff24}
.call-controls svg {width:24px;height:24px}
.call-dismiss svg {display:none;transform:rotate(135deg)}
#call-dialog[data-state="connected"] .call-dismiss svg {display:block}
#call-dialog[data-state="connected"] .call-dismiss .control-symbol {display:none}
.call-controls .control-symbol {font-size:28px;font-weight:300;line-height:1}
#call-dialog[data-state="ringing"] #call-phase i {animation:incoming-breath 3.4s ease-in-out infinite}
#call-dialog[data-state="connecting"] #call-phase i {animation:incoming-breath 1.8s ease-in-out infinite}
#call-dialog[data-state="error"] #call-phase i,#call-dialog[data-state="ended"] #call-phase i {background:#c3c9c5}
#call-dialog .call-privacy {margin:0;position:relative;z-index:2}
#call-dialog .disclosure {font-size:12px;color:#e1e5e0;white-space:nowrap}
#call-transcript-details {margin:16px 24px 0;text-align:left;border-top:1px solid #ffffff35;font-size:13px;padding-top:8px}
#call-transcript-details summary {cursor:pointer;min-height:28px}
#call-transcript {max-height:110px;font-size:13px;line-height:1.45}
#call-transcript p {border-color:#ffffff25}
@keyframes incoming-breath {0%,100%{opacity:1}50%{opacity:.45}}
@keyframes portrait-breath {0%,100%{box-shadow:0 0 0 7px #c0c9c509,0 0 0 8px #cad2ce33}50%{box-shadow:0 0 0 11px #c0c9c506,0 0 0 12px #cad2ce16}}
@media(prefers-reduced-motion:reduce){#call-dialog *,#call-dialog *::before {animation:none!important;transition:none!important}}

/* 1 · Media tiles and the incoming call */
@media(min-width:801px) {
  .panel:has(.media-frame),.panel:has(.screens) {padding:0;background:#2c3438;color:#fff}
  .panel:has(.media-frame)::before,.panel:has(.screens)::before {content:'';position:absolute;inset:30% 0 0;background:linear-gradient(transparent,#17202430 25%,#172024ed 100%);z-index:1;pointer-events:none}
  .panel:has(.media-frame)>h3,.panel:has(.screens)>h3 {position:absolute;bottom:58px;left:26px;right:26px;z-index:2;pointer-events:none;font-size:29px;max-width:470px}
  .panel:has(.media-caption:empty)>h3 {bottom:26px}
  .panel .media-frame,.panel .screens {position:absolute;inset:0}
  .panel .media-caption {position:absolute;bottom:24px;left:26px;right:24px;z-index:2;pointer-events:none;color:#f0f2ef}
  .panel:has(.screens)>h3 {bottom:78px}
  .panel:has(.screens) .media-caption {bottom:48px}
  .panel:has(.screens)>.disclosure {position:absolute;bottom:23px;left:26px;z-index:2;font-size:12px}
  .panel .screens {gap:18px;padding:25px 45px 0;align-items:flex-start;justify-content:center}
  .panel .screens .inspect-image {height:478px;max-width:none;width:220px;flex:0 0 220px;border-radius:14px 14px 0 0;box-shadow:0 4px 18px #1119}
  .panel .screens img {object-fit:cover;object-position:top}
  .panel.dm-panel .media-frame {padding:24px 100px 0;background:#343536}
  .panel.dm-panel .inspect-image {height:720px;border-radius:16px 16px 0 0;align-self:flex-start}
  .panel.dm-panel .inspect-image img {object-fit:cover;object-position:top}
  .panel.portrait-film .media-frame img {object-position:center top}
  #potus .panel.portrait-film .media-frame img {object-position:center 53%}
  #sotto .panel:has(.media-frame):not(.art-panel) .media-frame {padding:24px 110px 0;background:#2c3438}
  #sotto .panel:has(.media-frame):not(.art-panel) .inspect-image {height:600px;align-self:flex-start;border-radius:12px 12px 0 0}
  #sotto .panel:has(.media-frame):not(.art-panel) img {object-position:top}
  .panel.intro {padding:26px;background:linear-gradient(110deg,#e8eae3,#d2d8d2)}
  .panel.intro>h3 {font-size:19px;letter-spacing:-.025em;position:relative;z-index:2}
  .panel.intro .call-intro,.panel.intro .call-intro>div {display:contents}
  .panel.intro .call-intro .portrait {position:absolute;width:64%;height:100%;right:-25px;bottom:0;object-fit:contain;object-position:bottom;z-index:-1}
  .panel.intro .eyebrow {position:absolute;top:71px;left:26px;font-size:11px;letter-spacing:.045em}
  .panel.intro h4 {position:absolute;left:26px;top:106px;margin:0;font-size:56px;line-height:.95;font-weight:400;letter-spacing:-.045em}
  .panel.intro .role {position:absolute;left:26px;top:163px;font-size:19px;margin:0}
  .panel.intro .call-intro p:not(.eyebrow):not(.role):not(.small) {position:absolute;left:26px;top:203px;font-size:17px;line-height:1.4}
  .panel.intro .call-intro .button {position:absolute;left:26px;bottom:74px;margin:0}
  .panel.intro .call-intro .small {position:absolute;left:26px;bottom:51px;font-size:12px;margin:0}
  .panel.intro>.disclosure {position:absolute;left:26px;bottom:22px;font-size:12px;z-index:2}
  .panel.sage.intro {background:linear-gradient(110deg,#e7e7dc,#cdd3c6)}
  .panel.sage.intro h4 {font-family:var(--serif);font-size:47px;top:72px;line-height:.93}
  .panel.sage.intro .call-intro .portrait {width:64%;height:92%;bottom:0;right:-20px}
  .panel.sage.intro .call-intro p:not(.eyebrow):not(.role):not(.small) {top:173px;font-size:16px}
  .panel.sage.intro .call-intro .button {bottom:107px}
  .panel.sage.intro .call-intro .small {bottom:85px}
  .panel.sage.intro>.disclosure {bottom:62px}
  .panel .story-audio {position:absolute;left:26px;right:26px;bottom:10px;margin:0;padding-top:2px;border-color:#a7afa1;background:#e6e8dded;z-index:3}
  .panel .audio-toggle {font-size:14px;min-height:36px}
  .panel .audio-toggle span {font-size:12px}
  .panel:has(.audio-toggle[aria-expanded="true"]) {height:480px;min-height:480px}
  .panel:has(.audio-toggle[aria-expanded="true"]) .call-intro .button {bottom:187px}
  .panel:has(.audio-toggle[aria-expanded="true"]) .call-intro .small {bottom:165px}
  .panel:has(.audio-toggle[aria-expanded="true"])>.disclosure {bottom:142px}
  .panel .editions {margin-top:20px}
  .panel.ending {background:linear-gradient(130deg,#f4f4ef,#dfe3da)}
  .panel.charcoal:not(:has(.media-frame)) {background:#2c3438;color:#f4f4ef}
}
#call-dialog {width:320px;min-height:460px;background:linear-gradient(145deg,#354147ed,#252e32f7);backdrop-filter:blur(30px);padding-bottom:22px}
#call-dialog .call-heading {padding:25px 23px}
#call-dialog .call-portrait {width:96px;height:96px;border-radius:50%;overflow:hidden;background:#75817b;margin:7px auto 27px;box-shadow:0 0 0 7px #c0c9c509,0 0 0 8px #cad2ce33}
#call-dialog[data-state="ringing"] .call-portrait {animation:portrait-breath 3.4s ease-in-out infinite}
#call-dialog .call-portrait img {width:100%;height:100%;object-fit:cover;transform:scale(1.3);transform-origin:50% 24%}
#call-dialog .call-identity {padding:0 16px}
#call-dialog #call-status {margin:17px 24px 11px;min-height:20px}
#call-dialog .call-controls {min-height:91px}
#call-dialog .call-controls button {width:60px;height:60px;border-radius:50%;position:relative}
#call-dialog .call-pickup>span,#call-dialog .control-label {position:absolute;top:69px;width:100px;color:#f4f4f0;font-size:13px}
#call-dialog .call-privacy {margin-top:12px}
#call-dialog[data-state="error"] #call-status {font-size:13px}