/* THE WRECK EXPLORER V15.22 — authentic externally hosted 3D models. */
:root{--d:#06131b;--d2:#0a232c;--d3:#10303a;--pearl:#ecf2eb;--sea:#9de5d2;--copper:#d6bea0;--mut:#a8bfc0;--border:#789b9c55}
*{box-sizing:border-box}
body.wx13.model22{margin:0;background:var(--d);color:var(--pearl);font-family:'DM Sans',sans-serif;line-height:1.7;overflow-x:hidden}
.model22 h1,.model22 h2,.model22 h3,.model22 p{margin-top:0}
.model22 a{color:inherit}.model22 button{color:inherit}
.m22-container{max-width:1240px;width:calc(100% - 76px);margin:0 auto}
.m22-kicker{font:800 10px/1.5 'Manrope',Arial,sans-serif;letter-spacing:.2em;color:var(--copper)}
.m22-kicker .m22-rule{display:inline-block;width:32px;height:1px;background:var(--copper);vertical-align:middle;margin-right:12px}
.m22-serif{font:400 clamp(43px,7vw,99px)/1.035 Georgia,serif;letter-spacing:-.061em;margin:20px 0 28px}
.m22-serif em{font-style:italic;color:#a9decf;font-weight:400}
.m22-muted{color:#c0d0cd}
.m22-btn{display:inline-flex;justify-content:center;align-items:center;gap:18px;background:#c7f0e4;color:#08212a!important;padding:18px 23px;min-height:57px;border:1px solid #c7f0e4;font:800 10px/1.35 'Manrope',sans-serif;letter-spacing:.12em;text-decoration:none!important;cursor:pointer;transition:.2s}
.m22-btn:hover{transform:translateY(-2px);background:#ebfff8}.m22-btn:focus-visible{outline:2px solid #f4d1a3;outline-offset:4px}
.m22-btn.ghost{background:transparent;border-color:#b4d8cb6a;color:#daeee8!important}
.m22-btn.ghost:hover{background:#ffffff0c}
.m22-buttonline{display:flex;gap:12px;flex-wrap:wrap}
.m22-hero{position:relative;min-height:770px;min-height:100svh;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;isolation:isolate;border-bottom:1px solid #91b5ae48}
.m22-hero::before{content:'';position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,#041017ef 0%,#051822db 52%,#021f28ad 100%),linear-gradient(0deg,#06151beb,#06151b00 41%),url('assets/ocean-wreck.jpg') center 42%/cover no-repeat}
.m22-hero::after{content:'';position:absolute;inset:12% -16% -10% 28%;z-index:-1;opacity:.18;border:1px solid #91fae5;border-radius:50%;box-shadow:0 0 0 125px #8be7d710,0 0 0 245px #a7ebd009,0 0 0 375px #b1e6c705;pointer-events:none}
.m22-heroinner{padding:clamp(175px,20vh,250px) 0 110px;position:relative}
.m22-hero h1{max-width:890px;font:800 clamp(56px,9.5vw,142px)/.9 'Manrope',sans-serif;letter-spacing:-.078em;margin:28px 0 26px}
.m22-hero h1 em{font:italic 400 1.04em Georgia,serif;color:#b0ebda;letter-spacing:-.09em}
.m22-hero .m22-lead{max-width:570px;font:400 clamp(16px,1.6vw,20px)/1.8 'DM Sans',sans-serif;color:#d4e3df}
.m22-hero .m22-buttonline{margin-top:35px}
.m22-herostrip{border-top:1px solid #bfd5c840;background:#061922ad;display:flex;justify-content:space-between;gap:22px;padding:21px max(38px,calc((100% - 1240px)/2));font:800 10px/1.5 Manrope,sans-serif;letter-spacing:.15em;color:#d5e6de;flex-wrap:wrap}
.m22-herostrip b{color:#a5ead3}
.m22-statrow{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--border);background:#0b242c}
.m22-statrow>div{padding:23px 30px;border-right:1px solid var(--border);display:grid;gap:3px}
.m22-statrow>div:last-child{border:0}
.m22-statrow span{font:800 9px Manrope,sans-serif;letter-spacing:.15em;color:#9fc7bb}
.m22-statrow strong{font:400 21px Georgia,serif}
.m22-intro{padding:120px 0 60px;display:grid;grid-template-columns:1.2fr 1fr;gap:10%;align-items:end}
.m22-intro p{font-size:17px;max-width:465px;color:var(--mut);line-height:1.9;margin-bottom:15px}
.m22-section{padding:110px 0;border-top:1px solid var(--border)}
.m22-sectionhead{display:grid;grid-template-columns:1.15fr 1fr;gap:10%;align-items:end;margin-bottom:37px}
.m22-sectionhead h2{font:400 clamp(45px,6vw,82px)/1.06 Georgia,serif;letter-spacing:-.059em;margin:13px 0 0}
.m22-sectionhead h2 em{color:#b7e1d4}
.m22-sectionhead p{color:var(--mut);font-size:17px;max-width:445px;line-height:1.8;margin-bottom:3px}
.m22-collection{background:linear-gradient(165deg,#12303a,#071720 60%)}
.m22-tabs{display:flex;gap:9px;overflow:auto;scrollbar-width:thin;padding-bottom:14px}
.m22-tabs button{flex:1;min-width:190px;text-align:left;background:#09232d;border:1px solid var(--border);padding:22px 23px;cursor:pointer;transition:.2s}
.m22-tabs button:hover{background:#15343e}
.m22-tabs button[aria-selected="true"]{border-color:#a9e9d6;background:#194049;box-shadow:inset 0 3px #9adeca}
.m22-tabs .small{display:block;font:800 9px Manrope,sans-serif;letter-spacing:.17em;color:#d5c39e}
.m22-tabs strong{font:400 24px Georgia,serif;display:block;margin:10px 0 3px}
.m22-tabs .region{color:#afceca;font-size:12px}
.m22-stage{border:1px solid #8fb3a169;background:#071b25;min-height:515px;position:relative;overflow:hidden}
.m22-stagebar{height:48px;padding:0 23px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:10px;color:#acd4c7;font:800 9px Manrope,sans-serif;letter-spacing:.12em}
.m22-led{display:inline-block;width:7px;height:7px;background:#b9f2d7;border-radius:50%;box-shadow:0 0 14px #b9f2d7aa;margin-right:8px}
.m22-placeholder{height:460px;position:relative;overflow:hidden;padding:70px 30px 55px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(ellipse at 50% 65%,#1c51504a,transparent 60%),repeating-radial-gradient(circle at 50% 56%,transparent 0,transparent 58px,#7bcac713 60px,#7bcac713 61px,transparent 62px,transparent 118px),linear-gradient(135deg,#051622,#0c3038)}
.m22-placeholder[hidden],.m22-embed[hidden]{display:none!important}
.m22-crosshair{font-size:54px;line-height:1;color:#acebdaa3;margin-bottom:16px}
.m22-placeholder h3{font:400 clamp(32px,5vw,54px)/1.1 Georgia,serif;max-width:670px;letter-spacing:-.045em;margin:0 auto 18px}
.m22-placeholder p{color:#c1d7d1;max-width:545px;margin:0 auto 26px;font-size:15px}
.m22-embed{width:100%;height:460px;display:block;position:relative;background:#0c1a21}
.m22-embed iframe{border:0;width:100%;height:100%;display:block}
.m22-stagebottom{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 23px;background:#102b34;border-top:1px solid var(--border);flex-wrap:wrap}
.m22-stagebottom p{margin:0;max-width:640px;font-size:12px;color:#aebfbc;line-height:1.6}
.m22-stagebottom a{font:800 10px Manrope,sans-serif;letter-spacing:.1em;border-bottom:1px solid #d6bfa0;padding-bottom:6px;color:#e2d1b5}
.m22-modelmeta{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;margin-top:22px}
.m22-modelmeta article{padding:28px 30px;background:#102e37;border:1px solid var(--border)}
.m22-modelmeta .over{font:800 9px Manrope,sans-serif;letter-spacing:.16em;color:#b4d2c8}
.m22-modelmeta h3{font:400 32px Georgia,serif;margin:15px 0 12px}
.m22-modelmeta p{color:#b5cbca;margin-bottom:12px;font-size:14px}
.m22-modelmeta a{display:inline-block;margin-top:14px;color:#baebda;font:800 10px Manrope,sans-serif;letter-spacing:.09em;border-bottom:1px solid #95cbbb;padding-bottom:7px}
.m22-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.m22-card{display:flex;flex-direction:column;min-height:380px;background:#102c34;border:1px solid #88a99d5a;transition:.2s;overflow:hidden}
.m22-card:hover{border-color:#b2e7d3;transform:translateY(-3px)}
.m22-cardart{height:190px;background:radial-gradient(circle at 80% 40%,#43978c5b,transparent 40%),linear-gradient(100deg,#06151c,#18424a);position:relative;overflow:hidden;padding:26px}
.m22-cardart::after{content:'';position:absolute;inset:12px;background:repeating-radial-gradient(circle at 80% 30%,transparent 0,transparent 65px,#85c9bf16 67px,#85c9bf16 68px,transparent 70px,transparent 136px);pointer-events:none}
.m22-cardart .number{position:absolute;right:23px;top:6px;font:400 148px Georgia,serif;color:#a2ebd51c;line-height:1;letter-spacing:-.1em}
.m22-cardart .type{font:800 11px Manrope,sans-serif;letter-spacing:.17em;color:#c8e8d7}
.m22-cardbody{padding:25px 28px;display:flex;flex-direction:column;flex:1}
.m22-cardbody h3{font:400 35px Georgia,serif;margin:0 0 8px;letter-spacing:-.04em}
.m22-cardbody p{font-size:14px;color:#b9cecc;line-height:1.7;margin-bottom:20px}
.m22-cardbody .action{margin-top:auto;font:800 11px Manrope,sans-serif;letter-spacing:.09em;color:#b2ecd9}
.m22-disclaimer{padding:28px;border:1px solid #9cae9b4a;background:#0b2029;display:flex;gap:20px;margin-top:38px}
.m22-disclaimer .symbol{font:400 45px Georgia,serif;color:#cdb994;line-height:1}
.m22-disclaimer strong{font:800 10px Manrope,sans-serif;letter-spacing:.12em;color:#e3d1ae}.m22-disclaimer p{margin:9px 0 0;font-size:13px;color:#afc6c3}
.m22-sources{background:#091d26}
.m22-sourceslist a{display:grid;grid-template-columns:140px 1fr auto;gap:20px;align-items:center;padding:22px 0;border-top:1px solid var(--border);text-decoration:none}
.m22-sourceslist a:last-child{border-bottom:1px solid var(--border)}
.m22-sourceslist .tag{font:800 9px Manrope,sans-serif;letter-spacing:.1em;color:#d6c49d}
.m22-sourceslist strong{font:400 21px Georgia,serif}.m22-sourceslist .go{font-size:16px;color:#a2dbcd}
.m22-footer{display:flex;justify-content:space-between;align-items:center;gap:22px;padding:34px 0 46px;color:#a2b9b6;font:800 9px Manrope,sans-serif;letter-spacing:.13em;flex-wrap:wrap}
/* Case-specific: Lotte Halm */
.m22-hero.lotte-hero::before{background:radial-gradient(ellipse at 83% 47%,#1c756458,transparent 45%),linear-gradient(92deg,#041219 0%,#092531c9 75%),linear-gradient(0deg,#041016a8,transparent 70%),url('assets/ocean-wreck.jpg') center/cover no-repeat;filter:saturate(.78)}
.lotte-hero .m22-heroinner{padding-top:190px;padding-bottom:95px}
.lotte-hero h1{font-size:clamp(65px,11vw,148px)}
.lotte-hero h1 em{display:block;margin-left:.5vw}
.m22-lottefacts{grid-template-columns:repeat(4,1fr)}
.m22-diagramlayout{display:grid;grid-template-columns:1.13fr .87fr;gap:26px}
.m22-diagramframe{background:radial-gradient(ellipse at 50% 55%,#1a485147,transparent 76%),#071b24;border:1px solid var(--border);padding:22px;position:relative;min-height:460px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.m22-diagramframe::before{content:'ILLUSTRATIVE TOPOLOGY · NOT A SURVEY';position:absolute;left:22px;top:22px;font:800 9px Manrope,sans-serif;letter-spacing:.14em;color:#bad1c7}
.m22-diagramframe svg{width:100%;max-width:620px;height:auto;display:block}
.m22-hotspot{background:#a9e7d6;border:2px solid #093740;border-radius:50%;height:32px;width:32px;box-shadow:0 0 0 5px #b0edd733,0 0 22px #adead364;cursor:pointer;transition:transform .2s;display:flex;align-items:center;justify-content:center;font:800 10px Manrope,sans-serif;color:#08222b!important;position:absolute;transform:translate(-50%,-50%)}
.m22-hotspot:hover{transform:translate(-50%,-50%) scale(1.2)}
.m22-hotspot[aria-pressed="true"]{background:#e5cb9d;box-shadow:0 0 0 6px #e5cb9d3f,0 0 24px #e5cb9daa}
.m22-hotspot:focus-visible{outline:3px solid #fff;outline-offset:6px}
.m22-feature{border:1px solid var(--border);background:#12313b;padding:35px 37px;min-height:460px;display:flex;flex-direction:column}
.m22-feature small{font:800 10px Manrope,sans-serif;letter-spacing:.15em;color:#dfc9a3}
.m22-feature h3{font:400 clamp(30px,3vw,42px)/1.15 Georgia,serif;letter-spacing:-.04em;margin:35px 0 20px}
.m22-feature p{color:#b8cfcb;font-size:15px;line-height:1.85}
.m22-feature .evidence{border-top:1px solid #7aa29955;padding-top:18px;margin-top:10px;color:#c9d7d0}
.m22-featurecontrols{margin-top:auto;display:flex;gap:10px;justify-content:space-between;padding-top:20px}
.m22-featurecontrols button{border:1px solid #83afa657;background:transparent;color:#d4eee5;font:800 10px Manrope,sans-serif;letter-spacing:.09em;padding:12px 16px}
.m22-featurecontrols button:hover{background:#21434b}
.m22-timeline{display:grid;grid-template-columns:1fr 1fr;gap:30px}
.m22-steps{display:grid;gap:9px}
.m22-steps button{min-height:77px;display:flex;align-items:center;gap:21px;background:#102a33;color:#edf2e8;border:1px solid var(--border);text-align:left;padding:16px 21px;cursor:pointer;transition:background .2s}
.m22-steps button:hover{background:#1c3c43}
.m22-steps button[aria-pressed=true]{background:#1d4148;border-color:#9cdbca}
.m22-steps button span{color:#dfcaab;font:800 11px Manrope,sans-serif;letter-spacing:.1em;min-width:78px}
.m22-steps button strong{font:400 20px Georgia,serif}
.m22-timedetail{position:relative;min-height:340px;background:linear-gradient(145deg,#173942,#0a2029);border:1px solid var(--border);padding:35px;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.m22-timedetail .watermark{position:absolute;right:15px;top:-50px;font:400 168px Georgia,serif;color:#a3e4d013;pointer-events:none}
.m22-timedetail h3{font:400 39px/1.12 Georgia,serif;letter-spacing:-.045em;margin:14px 0 18px;position:relative}
.m22-timedetail p{font-size:15px;line-height:1.85;color:#b8cfca;position:relative}
.m22-guide{display:grid;grid-template-columns:repeat(3,1fr);gap:17px}
.m22-guide article{padding:27px;border:1px solid var(--border);background:#102d35}.m22-guide strong{font:800 10px Manrope,sans-serif;letter-spacing:.12em;color:#d5c29f}.m22-guide p{margin:11px 0 0;color:#b5c9c7;font-size:14px}
@media(max-width:900px){.m22-intro,.m22-sectionhead{grid-template-columns:1fr;gap:12px}.m22-diagramlayout{grid-template-columns:1fr}.m22-modelmeta{grid-template-columns:1fr}.m22-lottefacts{grid-template-columns:repeat(2,1fr)}.m22-timeline{grid-template-columns:1fr}.m22-guide{grid-template-columns:1fr}}
@media(max-width:650px){.m22-container{width:calc(100% - 42px)}.m22-hero{min-height:780px;min-height:100svh}.m22-heroinner{padding-top:158px;padding-bottom:55px}.m22-hero h1{font-size:clamp(49px,13vw,77px);line-height:.96;letter-spacing:-.071em}.m22-hero .m22-lead{font-size:16px}.m22-herostrip{padding:17px 21px;font-size:9px}.m22-herostrip span:last-child{display:none}.m22-herostrip span:first-child{max-width:230px}.m22-statrow{grid-template-columns:1fr 1fr}.m22-statrow>div{padding:20px}.m22-statrow>div:nth-child(2){border-right:0}.m22-statrow>div:nth-child(3){grid-column:span 2;border-top:1px solid var(--border)}.m22-lottefacts>div:nth-child(3){grid-column:auto}.m22-lottefacts>div:nth-child(2){border-right:0}.m22-lottefacts>div:nth-child(3),.m22-lottefacts>div:nth-child(4){border-top:1px solid var(--border)}.m22-intro{padding:83px 0 53px}.m22-serif{font-size:clamp(45px,11vw,66px)}.m22-section{padding:75px 0}.m22-sectionhead h2{font-size:clamp(42px,11vw,57px)}.m22-grid{grid-template-columns:1fr}.m22-card{min-height:310px}.m22-cardart{height:130px}.m22-stage{min-height:405px}.m22-placeholder{height:355px;padding:25px 19px}.m22-embed{height:355px}.m22-placeholder h3{font-size:32px}.m22-tabs button{min-width:240px}.m22-stagebar{font-size:8px;padding:0 15px}.m22-stagebottom{padding:20px 17px}.m22-diagramframe{min-height:325px;padding:4px}.m22-diagramframe::before{font-size:8px;left:12px;top:14px}.m22-hotspot{height:30px;width:30px}.m22-feature{padding:28px;min-height:350px}.m22-sourceslist a{grid-template-columns:1fr auto;gap:6px}.m22-sourceslist .tag{grid-column:span 2}.m22-footer{font-size:8px}.m22-timedetail{padding:26px}.lotte-hero .m22-heroinner{padding-top:155px;padding-bottom:58px}.lotte-hero h1{font-size:clamp(62px,16vw,95px)}.m22-disclaimer{padding:19px}.m22-disclaimer .symbol{display:none}}
@media (prefers-reduced-motion:reduce){.model22 *{scroll-behavior:auto!important;animation:none!important;transition:none!important}}