/* Shared interactions across both Old Frames concepts */
:root{--of-overlay:#17251fe6}
.of-video-trigger{appearance:none;border:0;width:100%;padding:0;margin:0;cursor:pointer;text-align:initial;font:inherit;display:grid;position:relative}
.of-video-trigger .play{transition:transform .2s,background .2s;z-index:1}
.of-video-trigger:hover .play,.of-video-trigger:focus-visible .play{transform:scale(1.12);background:#ffffff24}
.of-video-trigger:focus-visible{outline:3px solid #b8795d;outline-offset:5px}
.of-video-trigger:after{content:"Click to preview";position:absolute;right:18px;top:18px;font:10px Arial,sans-serif;letter-spacing:.15em;text-transform:uppercase;color:#fff;background:#17251f9c;padding:8px 10px}
.of-modal{border:0;background:transparent;padding:0;max-width:min(92vw,960px);width:100%;max-height:90vh;overflow:visible;color:#f6f2e8}
.of-modal::backdrop{background:rgba(9,17,14,.85);backdrop-filter:blur(7px)}
.of-modal-inner{background:#263c33;border:1px solid #b2b8aa55;box-shadow:0 28px 90px #0007;padding:clamp(22px,4vw,42px);position:relative}
.of-modal-close{position:absolute;right:12px;top:10px;width:44px;height:44px;border:1px solid #e7e5d780;border-radius:50%;background:transparent;color:#f5f0e5;cursor:pointer;font:24px Arial,sans-serif}
.of-modal-close:hover,.of-modal-close:focus-visible{background:#ffffff24}
.of-modal-kicker{font:11px Arial,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:#d4cdbb;margin:0 60px 24px 0}
.of-modal-screen{aspect-ratio:16/9;background:linear-gradient(135deg,#718275,#283e33 60%,#14231c);display:grid;place-items:center;border:1px solid #d7d8c72e;text-align:center;padding:25px}
.of-modal-screen strong{font:clamp(28px,5vw,60px)/1 Georgia,serif;letter-spacing:-.06em;font-weight:400}
.of-modal-screen span{display:block;margin-top:15px;font:11px Arial,sans-serif;letter-spacing:.18em;text-transform:uppercase}
.of-modal-note{font:15px/1.5 Georgia,serif;color:#e1e0d5;margin:18px 0 0}
body.of-modal-open{overflow:hidden}
.of-form{display:grid;gap:17px;max-width:620px}
.of-form-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}
.of-field{display:flex;flex-direction:column;gap:7px;min-width:0}
.of-field label{font:11px Arial,sans-serif;letter-spacing:.1em;text-transform:uppercase}
.of-field input,.of-field select,.of-field textarea{width:100%;min-width:0;padding:13px 14px;border:1px solid #8b9487;background:#f5f1e8;color:#22362c;border-radius:0;font:16px Arial,sans-serif}
.of-field textarea{min-height:115px;resize:vertical}
.of-field input:focus,.of-field select:focus,.of-field textarea:focus{outline:2px solid #bc7b5f;outline-offset:2px}
.of-form button,.of-copy{border:1px solid currentColor;background:transparent;color:inherit;padding:14px 20px;cursor:pointer;font:11px Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;justify-self:start}
.of-form button:hover,.of-copy:hover{background:#ffffff1a}
.of-form-note{font:13px/1.55 Arial,sans-serif;opacity:.85;margin:0}
.of-preview{margin-top:20px;border:1px solid currentColor;padding:18px;max-width:620px}
.of-preview[hidden]{display:none}
.of-preview h3{margin:0 0 12px;font:23px Georgia,serif;font-weight:400}
.of-preview pre{font:14px/1.6 Arial,sans-serif;white-space:pre-wrap;overflow-wrap:anywhere}
.of-preview p{font:13px/1.5 Arial,sans-serif}
.of-switch{position:fixed;bottom:18px;right:18px;z-index:8;display:flex;align-items:center;gap:0;background:#23392f;color:#f8f2e7;box-shadow:0 8px 28px #0004;border:1px solid #f1eee34f;font:10px Arial,sans-serif;letter-spacing:.09em;text-transform:uppercase}
.of-switch a{color:inherit;text-decoration:none;padding:14px 15px;border-right:1px solid #f1eee33b;white-space:nowrap}
.of-switch a:last-child{border-right:0}
.of-switch a:hover,.of-switch a:focus-visible{background:#ffffff22}
.of-switch a[aria-current="page"]{background:#a04c3a}
@media(max-width:620px){.of-form-row{grid-template-columns:1fr}.of-switch{right:8px;bottom:8px;max-width:calc(100vw - 16px)}.of-switch a{padding:12px 10px;font-size:9px}.of-modal-inner{padding:24px 16px 20px}.of-modal-kicker{margin-bottom:16px}.of-modal-screen{aspect-ratio:4/3}.of-modal-screen strong{font-size:34px}}
@media(prefers-reduced-motion:reduce){.of-video-trigger .play{transition:none}}