@charset "UTF-8";
:root{--navy:#082940;--ink:#17384b;--teal:#007c91;--pale:#e9f6f6;--line:#d7e4e8;--gray:#516875;--cream:#f6f8f7}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#f6f8f9;color:var(--ink);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--teal)}a:focus-visible{outline:3px solid #e28e6b;outline-offset:4px}header.top{background:#071f31;color:#fff;border-bottom:4px solid #c94b52}
.top-inner{max-width:1250px;margin:auto;display:flex;align-items:center;justify-content:space-between;padding:14px 24px;gap:16px}
.top img{display:block;max-width:210px;max-height:62px;object-fit:contain}.top nav{display:flex;gap:22px;flex-wrap:wrap}.top nav a{color:#f7fcff;text-decoration:none;font-weight:650;font-size:14px}
.breadcrumb{font-size:13px;color:#496678;margin:27px auto 24px;max-width:1200px;padding:0 24px}.breadcrumb a{color:#266c7f;text-decoration:none}
.hero{max-width:1200px;margin:auto;padding:0 24px 34px}.eyebrow{font-weight:800;letter-spacing:.16em;font-size:12px;color:#007b91;text-transform:uppercase}.hero h1{font-size:clamp(32px,5vw,62px);line-height:1.09;letter-spacing:-.042em;margin:14px 0 18px;color:#0c3047;font-weight:850;max-width:1120px}.dek{font-size:clamp(18px,2vw,23px);line-height:1.5;color:#38566a;max-width:1030px;margin:0 0 20px}.byline{display:flex;align-items:center;gap:13px;flex-wrap:wrap;color:#4b6775;font-size:14px;margin-bottom:26px}.byline strong{color:#123f54}
.mainphoto{margin:0;background:#ebf5f7;border-radius:19px;overflow:hidden;box-shadow:0 13px 45px #102e3b1a}.mainphoto img{display:block;width:100%;height:auto;object-fit:cover}.mainphoto figcaption{color:#4f6b7b;font-size:13px;padding:11px 19px;background:white;border-top:1px solid var(--line)}
.layout{max-width:1200px;margin:0 auto;padding:0 24px 64px;display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:46px;align-items:start}.text{min-width:0;background:white;border:1px solid #e5edee;border-radius:18px;padding:36px 55px 45px;box-shadow:0 12px 34px #122f3d0b}
.text p{font-family:Georgia,"Times New Roman",serif;font-size:18px;line-height:1.6;color:#253e4d;margin:.35rem 0 .85rem}.text em{font-style:italic}.text h2{font-size:29px;line-height:1.22;letter-spacing:-.025em;color:#123f52;margin:48px 0 21px;padding-bottom:12px;border-bottom:2px solid #e4eff0;scroll-margin-top:28px}.text h3{font-size:22px;line-height:1.3;color:#006d84;margin:35px 0 14px;scroll-margin-top:28px}.text .method-step{font-weight:790;margin:27px 0 7px;padding:11px 15px;background:#edf8f9;border-left:4px solid #12a5b6}
.text .pullquote{position:relative;font:750 clamp(21px,3vw,27px)/1.35 Inter,Arial,sans-serif;letter-spacing:-.02em;color:#074760;margin:24px 0;background:linear-gradient(98deg,#f0fbfb,#fcf9f2);padding:23px 26px;border-left:6px solid #04a4ad;border-radius:0 15px 15px 0}
.text .chips{display:flex;flex-wrap:wrap;gap:8px;margin:15px 0 22px}.text .chips span{font:750 14px Inter,Arial,sans-serif;background:#e5f5f6;border:1px solid #cee8e8;color:#00657c;border-radius:40px;padding:8px 13px}
.text .value-list{padding:18px 25px 18px 47px;background:#f0f8f9;color:#274f60;border-radius:13px;margin:16px 0 23px;columns:2;column-gap:16px}.text .value-list li{margin:6px 0;break-inside:avoid;font-size:16px}.text .beat-uppercase{font:750 17px Inter,Arial,sans-serif;letter-spacing:.025em;color:#08768a;margin:12px 0 6px}.text .tinylabel{font:750 15px Inter,Arial,sans-serif;color:#08768a;margin:17px 0 5px}.text .connective{text-align:center;font-style:italic;color:#78919b;font-size:16px}
.text .graphic{margin:34px -17px 36px;padding:15px 14px;background:#fff;border-radius:12px;border:1px solid #e4edee;box-shadow:0 8px 24px #15394b12}.text .graphic img{width:100%;height:auto;display:block;border-radius:8px}.text .graphic figcaption{font-size:12.5px;color:#5d7280;line-height:1.5;padding:13px 5px 0}
.text .closing-brand{margin-top:45px;padding:27px;background:#eef8f8;border-radius:13px;color:#0c4760;display:flex;flex-direction:column;gap:7px;font-size:14px}.text .closing-brand strong{font-size:18px;letter-spacing:.09em}
.text .sourcebox{border-top:1px solid #dce8eb;margin-top:35px;padding-top:28px}.text .sourcebox h2{border:0;margin:0 0 11px;padding:0}.text .sourcebox p{font-size:15px;font-family:Inter,Arial,sans-serif;line-height:1.65}.text .etc-logo{display:block;width:min(310px,100%);height:auto;margin-top:20px}
aside{position:sticky;top:20px;background:#fff;border:1px solid #e3ecee;border-radius:14px;padding:22px 20px;box-shadow:0 12px 25px #122f3d0b;max-height:calc(100vh - 40px);overflow:auto}aside strong{font-size:15px;color:#0b354b;display:block;margin-bottom:18px}aside a{display:block;color:#486475;font-size:13px;text-decoration:none;line-height:1.35;padding:8px 0;border-bottom:1px solid #f0f3f3}aside a:hover{color:#007c91}
footer.site{background:#071f31;color:#d1e2e7;padding:38px 24px;text-align:center;font-size:13px}footer.site a{color:#eafaff}
@media(max-width:900px){.layout{grid-template-columns:1fr}.layout aside{position:static;max-height:360px;order:-1}.text{padding:28px 26px}.top-inner{padding:14px 20px}.top img{max-width:170px}}
@media(max-width:600px){.hero,.layout,.breadcrumb{padding-left:14px;padding-right:14px}.hero{padding-bottom:22px}.top nav{gap:10px}.top nav a{font-size:12px}.top img{max-width:120px}.text{padding:18px 17px}.text p{font-size:17px}.text h2{font-size:25px}.text .graphic{margin:25px -7px}.text .value-list{columns:1;padding:15px 20px 15px 36px}.mainphoto figcaption{font-size:11.5px}}