@font-face{font-family:Cormorant;src:url('/media/harbor-world/cormorant-regular.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:Cormorant;src:url('/media/harbor-world/cormorant-italic.ttf') format('truetype');font-style:italic;font-weight:400;font-display:swap}
@font-face{font-family:Manrope;src:url('/media/harbor-world/manrope-regular.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
:root{--navy:#0b151b;--deep:#080f14;--ivory:#eee8dc;--muted:#a6b0b2;--gold:#c4a676;--line:rgba(205,187,150,.24);--serif:Cormorant,'Iowan Old Style','Palatino Linotype',Georgia,serif;--sans:Manrope,Arial,sans-serif;color-scheme:dark;font-family:var(--sans);font-size:16px;background:var(--navy);color:var(--ivory)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:40px}body{margin:0}body:has(dialog[open]){overflow:hidden}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid var(--gold);outline-offset:6px}::selection{background:#c4a676;color:#0b151b}h1,h2,h3,p{margin:0}h1,h2,h3{font-family:var(--serif);font-weight:400}em{font-weight:400;color:var(--gold)}.wrap{width:min(1280px,calc(100% - 112px));margin-inline:auto}.section-space{padding-block:112px}.eyebrow{text-transform:uppercase;font-size:.75rem;letter-spacing:.2em;line-height:1.8}.gold{color:var(--gold)}.wordmark{font-family:var(--serif);font-size:3.2rem;letter-spacing:-.14em;padding-right:.13em;line-height:1}.skip-link{position:fixed;top:12px;left:12px;background:var(--ivory);color:var(--navy);padding:16px;z-index:100;transform:translateY(-160%)}.skip-link:focus{transform:translateY(0)}
.site-header{position:absolute;top:0;left:0;right:0;z-index:2;display:flex;align-items:center;justify-content:space-between;padding:27px 56px;border-bottom:1px solid rgba(238,232,220,.13)}.site-header nav{display:flex;align-items:center;gap:38px;font-size:.875rem}.site-header nav a{transition:color .2s}.site-header nav a:hover{color:var(--gold)}.nav-passage{margin-left:20px}.nav-passage span{margin-left:18px;color:var(--gold)}
.hero{position:relative;min-height:790px;min-height:min(850px,100svh);display:flex;flex-direction:column;justify-content:center;isolation:isolate;overflow:hidden;background:#16242e}.hero-atmosphere{position:absolute;inset:0;z-index:-2;background:linear-gradient(115deg,#0b151b,#233743 70%,#354653)}.hero:after{position:absolute;content:'';inset:0;z-index:-1;background:linear-gradient(90deg,rgba(5,13,19,.56),rgba(5,13,19,.16) 70%),linear-gradient(0deg,#0b151b,transparent 35%,rgba(7,15,21,.2))}.hero-content{padding-top:125px;padding-bottom:130px}.hero .eyebrow{display:flex;gap:17px;align-items:center;color:#d8d1c2}.small-rule{height:1px;width:35px;background:var(--gold)}h1{font-size:clamp(6rem,12.2vw,11.2rem);line-height:1.02;letter-spacing:-.047em;margin:19px 0 18px}.gold-dot{color:var(--gold)}.hero-subtitle{font-family:var(--serif);font-size:clamp(1.8rem,2.7vw,2.6rem);line-height:1.17;max-width:560px;color:#e4e1d9}.button{display:inline-flex;align-items:center;gap:46px;justify-content:space-between;background:var(--gold);color:#121b20;min-height:54px;padding:16px 25px;font-size:.875rem;transition:background .2s,transform .2s}.button:hover{background:#ddc59d;transform:translateY(-2px)}.button span{font-size:1.25rem}.hero .button{margin-top:37px}.hero-footer{position:absolute;bottom:31px;left:0;right:0;display:flex;align-items:center;justify-content:space-between;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase}.hero-footer p{color:#bdc2c1;display:flex;gap:17px}.hero-footer a{display:flex;gap:28px;align-items:center}.down-arrow{font-size:1.5rem;line-height:1;color:var(--gold)}
.district{display:grid;grid-template-columns:1fr 1fr;gap:100px;align-items:center}.district .eyebrow{display:flex;align-items:center;gap:20px}.label-divider{width:28px;height:1px;background:var(--line)}h2{font-size:clamp(2.8rem,4.9vw,4.6rem);line-height:1.02;letter-spacing:-.025em}.district h2{font-size:clamp(3.7rem,6.1vw,5.8rem);margin:26px 0 23px}.serif-subtitle{font-family:var(--serif);font-size:1.7rem;font-style:italic;color:#bcc2c0}.district-story{max-width:390px;justify-self:end;padding-top:24px}.story-lines{font-family:var(--serif);font-size:2.1rem;line-height:1.27;letter-spacing:-.01em;margin-bottom:23px}.story-lines span{color:var(--gold)}.district-story>p:not(.story-lines){font-size:1rem;line-height:1.85;color:var(--muted)}.text-link{display:inline-flex;align-items:center;gap:28px;font-size:.875rem;padding:11px 0;border-bottom:1px solid var(--line);transition:color .2s,border-color .2s}.text-link:hover{color:var(--gold);border-color:var(--gold)}.text-link span{color:var(--gold);font-size:1.2rem}.district-story .text-link{margin-top:22px}
.characters{background:var(--deep);border-block:1px solid var(--line)}.section-heading{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:54px}.section-heading .eyebrow{color:var(--gold);margin-bottom:22px}.section-note{font-size:.875rem;line-height:1.8;color:var(--muted);padding-bottom:3px}.character-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:23px}.character{min-width:0}.portrait{display:block;position:relative;overflow:hidden;width:100%;aspect-ratio:364/524;border:1px solid var(--line);padding:0;background:#17212a}.portrait img{display:block;position:absolute;width:421.978%;height:auto;max-width:none;top:-3.05%;left:calc(-2.748% - var(--character-index,0)*105.495%);transition:filter .45s;filter:saturate(.8)}.portrait:hover img{filter:saturate(1.05) brightness(1.06)}.character:nth-child(2){--character-index:1}.character:nth-child(3){--character-index:2}.character:nth-child(4){--character-index:3}.portrait:after{content:'';position:absolute;inset:55% 0 0;background:linear-gradient(transparent,rgba(5,12,16,.7));pointer-events:none}.portrait-open{position:absolute;z-index:1;bottom:16px;left:17px;right:17px;display:flex;justify-content:space-between;align-items:center;text-transform:uppercase;font-size:.75rem;letter-spacing:.1em;color:#fff6e8}.portrait-open>span{font-size:1.2rem}.character-number{display:flex;gap:13px;align-items:baseline;margin-top:24px;font-family:var(--serif);font-size:1.1rem;color:var(--gold)}.character-number span{font-family:var(--sans);font-size:.75rem;line-height:1.65;color:var(--muted)}.character h3{font-size:clamp(1.65rem,2.35vw,2.25rem);line-height:1.15;letter-spacing:-.025em;margin-top:7px;margin-bottom:21px}.character-facts{display:grid;grid-template-columns:1fr 1fr;gap:8px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:15px 0;margin:0;min-height:80px}.character-facts dt{font-size:.75rem;letter-spacing:.08em;color:var(--muted);margin-bottom:5px}.character-facts dd{margin:0;font-family:var(--serif);font-size:1.1rem;line-height:1.2}.character-copy{font-size:.875rem;line-height:1.8;color:#bec4c2;margin-top:19px;min-height:76px}.character-task{font-family:var(--serif);font-size:1.4rem;font-style:italic;line-height:1.25;color:var(--gold);margin-top:12px}.artwork-link{display:flex;width:max-content;max-width:100%;margin:49px auto 0}
.progression .section-heading{margin-bottom:55px}.state-track{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:0;margin:0}.state-track li{position:relative;border-top:1px solid var(--line);padding:30px 25px 0 0}.state-marker{display:block;font-family:var(--serif);font-size:1.15rem;color:var(--gold);margin-bottom:28px}.state-track li:before{content:'';position:absolute;width:5px;height:5px;left:0;top:-3px;transform:rotate(45deg);background:var(--gold)}.state-track h3{font-size:2rem;line-height:1.15;margin-bottom:9px}.state-track p{color:var(--muted);font-size:.875rem;line-height:1.6}.state-arrow{position:absolute;right:30px;top:24px;font-size:1.5rem;color:#7d7667}
.closing{text-align:center;position:relative;isolation:isolate;overflow:hidden;border-block:1px solid var(--line);background:linear-gradient(150deg,#111c24,#1b2b35 60%,#111b22)}.closing-inner{padding-block:105px}.closing .eyebrow{color:var(--gold);margin-bottom:28px}.closing h2{font-size:clamp(2.5rem,4.8vw,4.5rem);line-height:1.12}.closing p:not(.eyebrow){color:#bbc2c2;font-size:1rem;line-height:1.8;margin:23px 0 31px}.closing .button{min-width:218px}.mobile-break{display:none}.site-footer{display:flex;gap:30px;align-items:center;padding-block:35px}.site-footer .wordmark{font-size:2.8rem}.site-footer>p{font-size:.75rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-left:20px}.back-top{margin-left:auto;font-size:.875rem;color:#c0c6c4;display:flex;align-items:center;gap:26px}.back-top span{color:var(--gold);font-size:1.2rem}
.artwork-dialog{width:min(450px,calc(100% - 28px));max-height:calc(100dvh - 30px);padding:13px;background:var(--navy);color:var(--ivory);border:1px solid var(--gold);overflow:auto}.artwork-dialog::backdrop{background:rgba(3,8,12,.9);backdrop-filter:blur(8px)}.dialog-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:3px 3px 15px}.dialog-header h2{font-size:1.5rem;letter-spacing:0}.dialog-close{display:flex;align-items:center;gap:10px;border:0;background:transparent;font-size:.875rem;min-height:44px;padding:0 7px}.dialog-close span{font-size:1.6rem;color:var(--gold)}.original-card{position:relative;width:100%;aspect-ratio:384/915;overflow:hidden}.original-card img{position:absolute;left:calc(var(--character-index,0)*-100%);top:0;width:400%;max-width:none;height:auto}
@media(min-width:1600px){.hero-content{padding-left:0}.site-header{padding-inline:max(56px,calc((100% - 1280px)/2))}}
@media(max-width:1100px){.wrap{width:calc(100% - 72px)}.site-header{padding-inline:36px}.district{gap:60px}.character-grid{gap:16px}.character-number{gap:8px}.character-number span{font-size:.75rem}.character h3{font-size:1.72rem}.character-facts{grid-template-columns:1fr;gap:9px;min-height:126px}.character-facts>div{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline}.character-facts dt{margin:0;min-width:56px}.character-copy{min-height:100px}.character-task{font-size:1.3rem}.state-track h3{font-size:1.7rem}}
@media(max-width:800px){.wrap{width:calc(100% - 48px)}.section-space{padding-block:76px}.site-header{padding:23px 24px}.site-header nav{gap:24px}.nav-passage{margin-left:0}.hero{min-height:740px;min-height:90svh;max-height:920px}.hero-content{padding-top:165px;padding-bottom:175px}h1{font-size:clamp(5.7rem,15vw,8rem)}.hero-subtitle{font-size:2rem}.hero-footer{bottom:30px}.hero-footer p{gap:10px;font-size:.75rem;letter-spacing:.1em}.hero-footer a{gap:12px;font-size:.75rem;letter-spacing:.1em}.district{grid-template-columns:1fr 1fr;gap:35px}.district h2{font-size:4rem}.district-story{padding-top:22px}.story-lines{font-size:1.8rem}.serif-subtitle{font-size:1.45rem}.character-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:50px 25px}.character h3{font-size:2rem}.character-number span{font-size:.8125rem}.character-facts{grid-template-columns:1fr 1fr;min-height:80px}.character-facts>div{display:block}.character-facts dt{margin-bottom:5px}.character-copy{min-height:75px}.character-task{font-size:1.45rem}.state-track{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 0}.state-track li{padding-right:18px}.state-arrow{right:24px}.state-track h3{font-size:2rem}.site-footer>p{margin-left:0;font-size:.75rem}.closing-inner{padding-block:82px}}
@media(max-width:540px){.site-header{padding-block:20px}.site-header .wordmark{font-size:2.7rem}.site-header nav{gap:20px;font-size:.8125rem}.nav-passage{display:none}.hero{min-height:720px;min-height:94svh;max-height:none}.hero-content{padding-top:165px;padding-bottom:140px}.hero .eyebrow{font-size:.75rem;letter-spacing:.16em}.hero h1{font-size:clamp(5.3rem,19.6vw,7rem);margin-top:23px;margin-bottom:19px}.hero-subtitle{font-size:1.9rem;line-height:1.23}.hero .button{margin-top:33px}.hero-footer{bottom:24px}.hero-footer p{max-width:145px;flex-wrap:wrap;gap:4px 8px;line-height:1.5}.hero-footer a{max-width:130px;line-height:1.6}.district{grid-template-columns:1fr;gap:36px}.district h2{font-size:4.4rem;margin-top:23px}.district-story{justify-self:start;padding-top:0;max-width:350px}.story-lines{font-size:1.9rem}.district-story>p:not(.story-lines){font-size:1rem}.section-heading{display:block;margin-bottom:35px}.section-heading h2{font-size:3.25rem}.section-note{margin-top:22px;font-size:.875rem}.section-note br{display:none}.section-note br:after{content:' '}.character-grid{grid-template-columns:1fr;gap:49px}.character{max-width:390px;width:100%;margin-inline:auto}.portrait{aspect-ratio:364/524}.portrait img{top:-3.05%}.character h3{font-size:2.3rem}.character-number{margin-top:20px}.character-number span{font-size:.875rem}.character-facts{min-height:78px}.character-facts dt{font-size:.75rem}.character-facts dd{font-size:1.2rem}.character-copy{font-size:1rem;min-height:auto;line-height:1.7}.character-task{font-size:1.6rem;margin-top:14px}.artwork-link{margin-top:38px}.state-track{grid-template-columns:1fr;gap:0}.state-track li{display:grid;grid-template-columns:45px 1fr;border-top:0;border-left:1px solid var(--line);padding:0 0 34px 24px;margin-left:2px}.state-track li:before{left:-3px;top:11px}.state-marker{grid-row:1/3;margin:6px 0 0;font-size:1rem}.state-track h3{font-size:2rem}.state-track p{grid-column:2}.state-arrow{position:static;grid-column:2;transform:rotate(90deg);width:20px;margin-top:15px;font-size:1.2rem}.state-track li:last-child{padding-bottom:0}.progression .section-heading{margin-bottom:35px}.closing-inner{padding-block:76px}.closing h2{font-size:2.6rem}.closing p:not(.eyebrow){font-size:.9375rem}.mobile-break{display:block}.site-footer{padding-block:30px;flex-wrap:wrap;gap:18px}.site-footer>p{font-size:.75rem;letter-spacing:.1em}.site-footer .back-top{font-size:.75rem;gap:12px;width:100%;justify-content:flex-end}.site-footer .wordmark{font-size:2.6rem}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.button:hover{transform:none}}
@media print{.site-header,.hero-footer,.button,.text-link,.portrait-open,.site-footer,.artwork-dialog{display:none}.hero{min-height:0;background:none}.hero-content{padding:30px 0}.hero:after,.hero-atmosphere{display:none}.wrap{width:100%}.section-space{padding:30px 0}.characters,.closing{background:none}.closing-inner{padding-block:30px}.character-grid{grid-template-columns:repeat(2,1fr)}.character{break-inside:avoid}.character-copy{min-height:0}:root{color-scheme:light;color:#17212a;background:#fff;--muted:#49555a;--gold:#78603b;--line:#bac0bd}h1{font-size:5rem}.hero-subtitle,.serif-subtitle,.character-copy,.closing p:not(.eyebrow){color:#49555a}}
/* The original card sheet stays intact; each portrait is framed in CSS. */
.hero-atmosphere{background:url('/media/harbor-world/harbor-atmosphere.png') 62% center/cover no-repeat}
.closing:before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(rgba(11,21,27,.86),rgba(11,21,27,.91)),url('/media/harbor-world/harbor-atmosphere.png') center 64%/cover no-repeat}
.character-copy{font-size:1rem}
@media(max-width:540px){.hero-atmosphere{background-position:70% center}.site-header nav{font-size:.875rem}.hero:after{background:linear-gradient(90deg,rgba(5,13,19,.65),rgba(5,13,19,.24)),linear-gradient(0deg,#0b151b,transparent 40%,rgba(7,15,21,.2))}}

.dialog-header{position:sticky;top:-13px;z-index:2;background:var(--navy)}

.state-track p{font-size:1rem}
@media(max-width:540px){.hero h1{font-size:clamp(3.6rem,18vw,5.2rem)}.hero-atmosphere{background-position:88% center}.site-footer>p{letter-spacing:.05em}}
h1,h2,h3{overflow-wrap:anywhere}.site-header nav{flex-wrap:wrap;justify-content:flex-end}

/* Connected to the existing XO publications. */
.publication-links{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;text-align:left;border-top:1px solid var(--line);margin-top:70px;padding-top:28px}
.publication-links a{font-size:1rem;line-height:1.6;position:relative;padding-right:18px}
.publication-links a:hover{color:var(--gold)}.publication-links span{display:block;font-size:.75rem;letter-spacing:.06em;color:var(--muted);margin-bottom:6px}.publication-links b{font-weight:400;color:var(--gold);padding-left:7px}
@media(max-width:800px){.publication-links{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;margin-top:50px}}
@media(max-width:540px){.publication-links{grid-template-columns:1fr;gap:23px;text-align:center}}