:root{--color-white: #ffffff;--color-gray-50: #fafbfc;--color-gray-100: #f4f6f8;--color-gray-200: #e9ecef;--color-gray-300: #d1d8dc;--color-gray-400: #9ba3af;--color-gray-500: #6b7785;--color-gray-600: #4a5568;--color-gray-700: #2d3748;--color-gray-800: #1a202c;--color-gray-900: #171923;--color-ocean-50: #f0fdf9;--color-ocean-100: #ccfbef;--color-ocean-200: #99f6e0;--color-ocean-300: #5de9c7;--color-ocean-400: #22d4aa;--color-ocean-500: #0ab68b;--color-ocean-600: #059669;--color-ocean-700: #047857;--color-primary: var(--color-ocean-600);--color-primary-light: var(--color-ocean-100);--color-text: var(--color-gray-800);--color-text-light: var(--color-gray-600);--color-text-lighter: var(--color-gray-400);--color-border: var(--color-gray-200);--color-background: var(--color-white);--color-background-alt: var(--color-gray-50);--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--space-xs: .5rem;--space-sm: 1rem;--space-md: 1.5rem;--space-lg: 2rem;--space-xl: 3rem;--space-2xl: 4rem;--space-3xl: 6rem;--space-4xl: 8rem;--container-sm: 40rem;--container-md: 48rem;--container-lg: 56rem;--container-xl: 64rem;--container-full: 1400px;--header-height: 5rem;--header-height-scrolled: 3.5rem;--nav-width: 280px;--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);--radius-sm: .375rem;--radius-md: .5rem;--radius-lg: .75rem;--radius-xl: 1rem;--transition-base: .2s;--ease-out: cubic-bezier(.25, .46, .45, .94)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:var(--font-sans);font-size:1rem;line-height:1.7;color:var(--color-text);background-color:var(--color-background);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.skip-link{position:absolute;top:-40px;left:6px;background:var(--color-primary);color:var(--color-white);padding:8px;text-decoration:none;border-radius:var(--radius-md);z-index:9999}.skip-link:focus{top:6px}.site-layout{display:grid;grid-template-areas:"header header" "nav main" "nav footer";grid-template-columns:var(--nav-width) 1fr;grid-template-rows:var(--header-height) 1fr auto;min-height:100vh;transition:grid-template-columns .3s var(--ease-out)}.site-layout[data-nav=closed]{grid-template-columns:0 1fr}.site-header{grid-area:header;background:#fffffff2;backdrop-filter:blur(20px);border-bottom:1px solid var(--color-border);position:sticky;top:0;z-index:1000;transition:all .3s ease}.site-header.scrolled{background:#fffffffa;box-shadow:var(--shadow-sm)}.header-container{display:flex;align-items:center;height:100%;padding:0 var(--space-lg);gap:var(--space-lg)}.hamburger{width:2rem;height:2rem;background:none;border:none;cursor:pointer;display:flex;flex-direction:column;justify-content:center;gap:.25rem;z-index:1001;flex-shrink:0}.hamburger span{display:block;width:100%;height:2px;background:var(--color-text);transition:all .3s ease}.hamburger.active span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}.hamburger.active span:nth-child(2){opacity:0}.hamburger.active span:nth-child(3){transform:rotate(-45deg) translate(7px,-6px)}.logo{font-size:1.5rem;font-weight:700;color:var(--color-primary);text-decoration:none;letter-spacing:-.025em;flex:1}.desktop-nav{display:none;gap:var(--space-xl);margin-left:auto}.desktop-nav a{color:var(--color-text);text-decoration:none;font-weight:500;transition:color var(--transition-base) var(--ease-out)}.desktop-nav a:hover{color:var(--color-primary)}.site-nav{grid-area:nav;background:var(--color-white);border-right:1px solid var(--color-border);padding:var(--space-lg);overflow-y:auto;transition:transform .3s var(--ease-out)}.site-layout[data-nav=closed] .site-nav{transform:translate(-100%)}.nav-section{margin-bottom:var(--space-sm)}.nav-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;padding:var(--space-sm);background:none;border:none;cursor:pointer;font-size:.875rem;font-weight:600;color:var(--color-text-light);text-transform:uppercase;letter-spacing:.05em;border-radius:var(--radius-md);transition:all var(--transition-base) var(--ease-out);min-height:44px}.nav-toggle:hover{background:var(--color-background-alt);color:var(--color-primary)}.nav-toggle:after{content:"⌄";font-size:1rem;color:var(--color-text-lighter);transition:transform .3s ease,color .2s ease}.nav-toggle.active:after{transform:rotate(180deg);color:var(--color-primary)}.nav-list{list-style:none;margin-top:var(--space-sm);display:none;background:var(--color-gray-50);border-radius:var(--radius-md);padding:var(--space-sm)}.nav-list.active{display:block}.nav-item{margin-bottom:var(--space-xs)}.nav-item:last-child{margin-bottom:0}.nav-link{display:block;padding:var(--space-sm);color:var(--color-text);text-decoration:none;border-radius:var(--radius-md);transition:all var(--transition-base) var(--ease-out);font-size:.875rem;min-height:40px}.nav-link:hover{background:var(--color-primary-light);color:var(--color-primary)}.nav-link.active{background:var(--color-primary);color:var(--color-white)}.site-main{grid-area:main;min-height:0;position:relative}.reading-progress{position:fixed;top:var(--header-height);left:0;width:0%;height:3px;background:var(--color-primary);z-index:999;transition:width .1s ease}.site-footer{grid-area:footer;background:var(--color-white);border-top:1px solid var(--color-border);border-right:1px solid var(--color-border);color:var(--color-text);padding:var(--space-lg)}.footer-container{max-width:var(--container-xl);margin:0 auto;text-align:center}.footer-logo{font-size:1.25rem;font-weight:700;color:var(--color-primary);margin-bottom:var(--space-md)}.footer-nav{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--space-md) var(--space-xl)}.footer-top{margin-bottom:var(--space-lg)}.footer-bottom{border-top:1px solid var(--color-border)}.footer-bottom-inner{display:flex;flex-wrap:wrap}.footer-nav a{color:var(--color-text);text-decoration:none;transition:color var(--transition-base) var(--ease-out)}.footer-nav a:hover{color:var(--color-primary)}.footer-bottom-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-md)}.footer-list{list-style:none;padding:0;margin:0;display:grid;gap:.4rem}@media (max-width: 1100px){.footer-top{grid-template-columns:1fr}.footer-nav{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (max-width: 700px){.footer-nav{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width: 480px){.footer-nav{grid-template-columns:1fr}}.footer-copyright{font-size:.75rem;color:var(--color-text-lighter)}.mobile-nav-overlay{display:none;position:fixed;inset:0;background:#00000080;z-index:999;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease}.mobile-nav-overlay[data-active=true]{opacity:1;visibility:visible}.info-box{background:var(--color-white);border:2px solid var(--color-primary);border-radius:var(--radius-lg);padding:var(--space-lg);margin:var(--space-xl) 0;box-shadow:0 2px 8px #0596691a;position:relative}.info-box:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--color-primary);border-radius:var(--radius-lg) var(--radius-lg) 0 0}.info-box-title{font-weight:700;font-size:1.125rem;color:var(--color-primary);margin-bottom:var(--space-md);display:flex;align-items:center;gap:var(--space-sm)}.info-box-title:before{content:"📋";font-size:1rem}.info-box p{margin-bottom:var(--space-sm);font-size:1rem;line-height:1.6}.info-box p:last-child{margin-bottom:0}.info-box strong{color:var(--color-text);font-weight:600}.info-box-content p{margin-bottom:var(--space-sm)}.info-box-content p:last-child{margin-bottom:0}.key-takeaway{background:var(--color-ocean-100);border:1px solid var(--color-primary);border-radius:var(--radius-md);padding:var(--space-md);margin:var(--space-lg) 0;position:relative}.key-takeaway:before{content:"💡";position:absolute;top:var(--space-md);left:var(--space-md);font-size:1.2rem}.key-takeaway p{margin:0;padding-left:var(--space-xl);font-weight:500;color:var(--color-text);font-size:1rem;line-height:1.5}.preview-section{margin:var(--space-xl) 0;padding:var(--space-md);background:var(--color-white);border:2px solid var(--color-primary);border-radius:var(--radius-lg);box-shadow:0 2px 8px #0596691a;position:relative}.preview-section:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--color-primary);border-radius:var(--radius-lg) var(--radius-lg) 0 0}.preview-title{font-size:1.2rem;font-weight:700;color:var(--color-primary);margin-bottom:var(--space-md);letter-spacing:-.01em}.preview-list{display:flex;flex-direction:column}.preview-item{padding:10px 0;border-bottom:1px solid var(--color-gray-200)}.preview-item:last-child{border-bottom:none;padding-bottom:0}.preview-item:first-child{padding-top:0}.preview-question{font-size:1rem;font-weight:700;color:var(--color-gray-900);margin:0 0 3px;line-height:1.25;letter-spacing:-.01em}.preview-summary{color:var(--color-gray-600);margin:0 0 4px;line-height:1.4;font-size:.95rem}.article-content p.preview-summary{margin:0}.preview-link{color:var(--color-primary);text-decoration:none;font-weight:600;font-size:.9rem;transition:all .2s ease;display:inline-block;margin:0;border-bottom:1px solid transparent}.preview-link:hover{color:var(--color-ocean-700);border-bottom-color:var(--color-ocean-700)}.article-content h1,.article-content h2,.article-content h3,.article-content h4,.article-content h5,.article-content h6{color:var(--color-text);font-weight:700;line-height:1.2;letter-spacing:-.01em}.article-content h1{font-size:clamp(2.5rem,5vw,4rem);margin:var(--space-2xl) 0 var(--space-xl) 0}.article-content h2{font-size:clamp(1.75rem,4vw,2.25rem);margin:var(--space-2xl) 0 var(--space-lg) 0;letter-spacing:-.02em}.article-content h3{font-size:clamp(1.25rem,3vw,1.5rem);margin:var(--space-xl) 0 var(--space-md) 0;position:relative;padding-left:var(--space-md);line-height:1.3}.article-content p:last-child{margin-bottom:0}.price{background:var(--color-ocean-100);padding:4px 8px;font-weight:500;border-radius:var(--radius-md);font-size:.9em;text-shadow:0 1px 2px rgba(0,0,0,.1);box-shadow:0 2px 4px #05966933}.key-takeaway .price{background:var(--color-white)!important}.highlight{background:var(--color-ocean-100);color:var(--color-gray-600);font-weight:800;padding:2px 4px;border-radius:3px;border-radius:var(--radius-sm)}.key-takeaway .highlight{background:var(--color-white)!important}.article-content blockquote{border-left:4px solid var(--color-primary);padding-left:var(--space-lg);margin:var(--space-lg) 0;font-style:italic;color:var(--color-text-light)}.container-readable{max-width:var(--container-md);margin:0 auto;padding:0 var(--space-lg)}.container-wide{max-width:var(--container-xl);margin:0 auto;padding:0 var(--space-lg)}.container-full{max-width:var(--container-full);margin:0 auto;padding:0 var(--space-lg)}@media (min-width: 768px){.header-container{padding:0 var(--space-xl)}.desktop-nav{display:flex}.container-readable,.container-wide,.container-full{padding:0 var(--space-xl)}}@media (max-width: 767px){:root{--header-height: 2.5rem}.hide-on-mobile{display:none!important}.site-layout{display:block;position:relative}.site-layout[data-nav=closed] .site-nav,.site-layout[data-nav=open] .site-nav{transform:none}.site-header{position:sticky;top:0;width:100%;z-index:1001;display:block}.desktop-nav{display:none!important}.site-nav{position:fixed;top:var(--header-height);left:0;width:var(--nav-width);max-width:80vw;height:calc(100vh - var(--header-height));z-index:1000;box-shadow:var(--shadow-lg);transform:translate(-100%);transition:transform .3s var(--ease-out);background:var(--color-white);border-right:1px solid var(--color-border);padding:var(--space-lg);overflow-y:auto;overflow-x:hidden}.site-layout[data-nav=open] .site-nav{transform:translate(0)}.site-layout[data-nav=closed] .site-nav{transform:translate(-100%)}.nav-section{margin-bottom:var(--space-sm)}.nav-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;padding:var(--space-sm);background:none;border:none;cursor:pointer;font-size:.875rem;font-weight:600;color:var(--color-text-light);text-transform:uppercase;letter-spacing:.05em;border-radius:var(--radius-md);transition:all var(--transition-base) var(--ease-out);min-height:44px}.nav-toggle:hover{background:var(--color-background-alt);color:var(--color-primary)}.nav-toggle:after{content:"⌄";font-size:1rem;color:var(--color-text-lighter);transition:transform .3s ease,color .2s ease}.nav-toggle.active:after{transform:rotate(180deg);color:var(--color-primary)}.nav-list{list-style:none;margin-top:var(--space-sm);display:none;background:var(--color-gray-50);border-radius:var(--radius-md);padding:var(--space-sm)}.nav-list.active{display:block}.nav-item{margin-bottom:var(--space-xs)}.nav-item:last-child{margin-bottom:0}.nav-link{display:block;padding:var(--space-sm);color:var(--color-text);text-decoration:none;border-radius:var(--radius-md);transition:all var(--transition-base) var(--ease-out);font-size:.875rem;min-height:40px}.nav-link:hover{background:var(--color-primary-light);color:var(--color-primary)}.nav-link.active{background:var(--color-primary);color:var(--color-white)}.site-main{width:100%;min-height:calc(100vh - var(--header-height));position:relative;z-index:1;margin-top:0}.site-footer{width:100%;border-right:none;position:relative;z-index:1}.mobile-nav-overlay{display:block}.reading-progress{top:var(--header-height)}.footer-nav{flex-direction:column;gap:var(--space-sm)}.container-readable,.container-wide,.container-full{padding:0 var(--space-md)}.article-content p{font-size:1rem}.preview-item{padding:var(--space-sm) 0}}.breadcrumb-container{background:var(--color-background-alt);border-bottom:1px solid var(--color-border);padding:var(--space-md) 0}.breadcrumb{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-sm)}.breadcrumb__item{display:flex;align-items:center;gap:var(--space-sm)}.breadcrumb__link{color:var(--color-text-light);text-decoration:none;font-size:.875rem;transition:color var(--transition-base) var(--ease-out)}.breadcrumb__link:hover{color:var(--color-primary)}.breadcrumb__current{color:var(--color-text);font-size:.875rem;font-weight:500}.breadcrumb__separator{color:var(--color-text-lighter);font-size:.875rem}.article-hero{position:relative;min-height:45vh;display:flex;align-items:center;background-color:var(--color-ocean-200);background:linear-gradient(135deg,var(--color-ocean-200) 0%,var(--color-gray-400) 100%);overflow:hidden}.article-hero__background{position:absolute;inset:0;z-index:1}.article-hero__image{width:100%;height:100%;object-fit:cover}.article-hero__overlay{position:absolute;inset:0;background:linear-gradient(to bottom,#0000 0% 100%);z-index:2;pointer-events:none}.article-hero__content{position:relative;z-index:1;text-align:center;color:var(--color-white);padding:var(--space-2xl) 0;width:100%}.article-container{max-width:var(--container-lg);margin:0 auto;padding:0 var(--space-lg)}.island-type-badge{display:inline-flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);border-radius:50px;font-size:.875rem;font-weight:600;color:var(--color-white);margin-bottom:var(--space-md);text-transform:uppercase;letter-spacing:.05em}.island-type-badge__icon{font-size:1rem}.article-title{font-size:clamp(2.5rem,5vw,4rem);font-weight:700;line-height:1.1;color:var(--color-white);margin-bottom:var(--space-md);letter-spacing:-.02em;text-shadow:0 2px 4px rgba(0,0,0,.5)}.article-subtitle{font-size:1.25rem;margin-bottom:var(--space-xl);opacity:.9;font-weight:500;color:var(--color-white)}.article-metadata{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--space-md);max-width:600px;margin:0 auto}.metadata-item{display:flex;flex-direction:column;align-items:center;gap:var(--space-xs);background:#ffffff1a;padding:var(--space-md);border-radius:var(--radius-md);backdrop-filter:blur(10px)}.metadata-label{font-size:.75rem;color:var(--color-white);opacity:.8;font-weight:500;text-transform:uppercase;letter-spacing:.05em}.metadata-value{font-size:.875rem;color:var(--color-white);font-weight:600;text-align:center}.article-content{padding:var(--space-lg) 0}.article-content h2{font-size:clamp(1.75rem,4vw,2.25rem);font-weight:700;line-height:1.2;color:var(--color-text);margin:var(--space-2xl) 0 var(--space-lg) 0;letter-spacing:-.02em}.article-content h3{font-size:clamp(1.25rem,3vw,1.5rem);font-weight:700;color:var(--color-text);margin:var(--space-xl) 0 var(--space-md) 0;letter-spacing:-.01em;position:relative;padding-left:var(--space-md);line-height:1.3}.article-content h3:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--color-primary);border-radius:2px}.article-content p{margin-bottom:var(--space-lg);font-size:1.125rem;line-height:1.7}.article-content a{color:var(--color-primary);text-decoration:none;font-weight:500;border-bottom:1px solid transparent;transition:all var(--transition-base) var(--ease-out)}.article-content a:hover{color:var(--color-ocean-700);border-bottom-color:var(--color-ocean-700)}.article-content ul,.article-content ol{margin:var(--space-lg) 0;padding-left:var(--space-xl)}.article-content li{margin-bottom:var(--space-sm);line-height:1.6}.island-content{background:var(--color-background-alt);padding:var(--space-xl) 0}@media (max-width: 768px){.article-metadata{grid-template-columns:repeat(2,1fr);gap:var(--space-sm)}.breadcrumb{flex-direction:column;align-items:flex-start;gap:var(--space-xs)}.article-hero__content{position:relative;z-index:10;text-align:center;color:var(--color-white);padding:var(--space-2xl) 0;width:100%}.article-hero__content .article-title{color:var(--color-white)!important;text-shadow:0 2px 8px rgba(0,0,0,.8),0 1px 3px rgba(0,0,0,.9)}.article-container{padding:0 var(--space-md)}}@media (max-width: 480px){.article-metadata{grid-template-columns:1fr;gap:var(--space-sm)}}.article-content .article-hero--inline{min-height:30vh;margin:var(--space-2xl) 0;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg)}.article-content .article-title--inline{font-size:clamp(3rem,1vw,2rem);font-weight:700;color:var(--color-white)!important;text-shadow:0 2px 8px rgba(0,0,0,.8),0 1px 3px rgba(0,0,0,.9);margin-bottom:0;line-height:1.2;letter-spacing:-.02em}.article-content h3.article-title--inline{padding:0;margin:auto}.article-content h3.article-title--inline:before{width:0}@media (max-width: 767px){.article-content .article-hero--inline{min-height:25vh;margin:var(--space-xl) 0}.article-content .article-title--inline{font-size:clamp(1.5rem,6vw,2.5rem);padding:0 var(--space-sm)}}