:root{--wrap:1600px;--gut:clamp(22px,3.9vw,64px);--band:clamp(24px,2.5vw,42px);--ff-display:'Alegreya',Georgia,serif}
body{line-height:1.35}
#hafenviertel{scroll-margin-top:80px}
.hero{height:57vw;min-height:600px;max-height:960px;--above:48%}
.hero__bg img{transform:none;object-position:center}
.hero__bg::after{background:linear-gradient(90deg,rgba(3,27,33,.26),transparent 65%),linear-gradient(0deg,rgba(3,27,33,.18),transparent 45%)}
.hero__copy{display:flex;flex-direction:column;justify-content:flex-start;padding-top:22vw}
.hero__copy-top{align-self:auto;padding:0}
.hero-display{font-size:clamp(70px,8.1vw,132px);font-weight:500;line-height:.86;letter-spacing:-.045em;max-width:11ch;text-shadow:0 2px 12px #08262c55}
.hero__copy-bot{padding-top:16px;max-width:650px}
.hero-h1{font-size:clamp(16px,1.55vw,23px);max-width:46ch;margin-bottom:7px}
.hero-sub{font-size:clamp(15px,1.4vw,21px);max-width:none;margin-bottom:16px}
.hero-eyebrow{top:9vw;color:var(--bone);font-size:clamp(10px,.9vw,14px);letter-spacing:.35em;padding:8px 12px;background:rgba(6,26,32,.42);backdrop-filter:blur(3px);border-right:1px solid color-mix(in oklab,var(--bone) 34%,transparent);text-shadow:0 1px 8px rgba(6,26,32,.7)}
.hero-meta{bottom:22px}
.hero-meta .coord{padding:3px 12px}
.depth-scale{top:52%;gap:5vw}
.caustics,.shafts{opacity:.13}
.brand b{font-family:var(--ff-display);font-size:clamp(17px,1.55vw,25px);font-weight:400;letter-spacing:.025em}
.brand i{font-style:normal;font-size:14px}
.nav a{font-family:var(--ff-text);font-size:14px;letter-spacing:0}
.masthead__in{min-height:68px;gap:20px}
.nav ul{gap:22px}
.btn{font-family:var(--ff-text);font-weight:400;font-size:clamp(15px,1.45vw,21px);letter-spacing:0;padding:9px 22px;border:1px solid #d6a17966;line-height:1.2}
.btn--sm{font-size:14px;padding:11px 16px}
.band,.shotband{content-visibility:auto;contain-intrinsic-size:auto 620px}
.band__no{font-size:11px;letter-spacing:.23em;margin-bottom:12px}
.band h2,.shotband h2{font-size:clamp(42px,5.4vw,82px);line-height:.94;letter-spacing:-.035em;font-weight:500;margin-bottom:14px}
.band .lead,.shotband .lead{font-size:clamp(16px,1.45vw,22px);line-height:1.3;margin-bottom:16px}
.band--bone,.band--bone2{background-color:#f1e7d3;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%239b7947' opacity='.065' filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}
.stories__grid{grid-template-columns:1.25fr 1.48fr .62fr;gap:16px;align-items:center}
.plate{min-height:23vw;margin-top:-32px;margin-bottom:-22px}
.plate__wide{width:100%;left:-5%;top:0;mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent);mix-blend-mode:multiply}
.plate__disc{width:68%;right:8%;top:0;border:2px solid #f9f1dd;box-shadow:none}
.idx,.idx li{border:0;margin:0}
.idx a{grid-template-columns:26px 1px 1fr;gap:14px;padding:10px 0}
.idx em{font-family:var(--ff-text);font-size:21px;opacity:1}
.idx b{font-size:clamp(18px,2vw,30px)}
.band:has(.plate)>.wrap{position:relative}
.sidenote--marked{position:absolute;right:var(--gut);bottom:-10px;font-size:9px;line-height:1.4}
.band--brick{min-height:27vw;background:#a74f2d;isolation:isolate}
.band--brick>.wrap{padding-right:var(--gut)}
.route__grid{grid-template-columns:1.1fr .85fr .46fr;gap:20px;width:74%}
.route__grid h2{max-width:11ch}
.routeline{align-self:end;padding:0 0 32px}
.routeline .stop{font-size:21px;font-family:var(--ff-text);letter-spacing:0}
.routefacts{border-left:1px solid #e9c89a70;padding-left:16px;gap:24px}
.routefacts b{font-family:var(--ff-text);font-size:21px;line-height:1.1}
.routefacts span{font-family:var(--ff-text);font-size:16px}
.vshot{width:34%;z-index:-1;mask-image:linear-gradient(90deg,transparent,#000 27%)}
.vshot .ai-badge{top:auto;writing-mode:horizontal-tb;font-size:10px;letter-spacing:.14em}
.shotband{padding-block:28px;min-height:26vw;overflow:hidden}
.shotband__in{max-width:37%}
.shotband__in h2{max-width:10ch}
.shotband::before{background:linear-gradient(90deg,#062b34e8, #062b3475 37%,transparent 68%),linear-gradient(0deg,#062b3460,transparent 50%)}
.shotband:has(.catrow){min-height:28vw}
.shotband:has(.catrow) h2{max-width:14ch}
.shotband:has(.catrow)>.wrap{position:relative}
.catrow{position:absolute;left:39%;right:var(--gut);bottom:-8px;margin:0;padding:0;border:0;gap:25px}
.catrow a{gap:3px}
.catrow b{font-size:20px}
.catrow span{font-size:11px;opacity:.9}
.kids__grid{grid-template-columns:1fr 2.15fr;gap:16px}
.kids__grid h2{font-size:clamp(42px,5.1vw,78px)}
.ribbon{margin-top:-32px;margin-bottom:-20px;mix-blend-mode:multiply}
.sidenote--top{font-size:9px;z-index:2}
.mag__grid{grid-template-columns:1fr repeat(3,1fr);gap:10px}
.mag__lead h2{font-size:clamp(36px,3.8vw,58px)}
.story{min-height:23vw}
.story>figure,.story>picture{position:absolute;inset:0}
.story img,.story picture{height:100%;width:100%;object-fit:cover}
.story__cap{position:relative;margin-top:auto;flex:0 0 auto;background:linear-gradient(0deg,#062f38 65%,#062f38d9 85%,transparent);padding:38px 18px 16px;min-height:45%}
.story__cap b{font-size:clamp(22px,2.4vw,36px)}
.story__cap p{padding-right:18px;font-size:16px}
.story__cap svg{position:absolute;right:18px;bottom:24px}
.siteft{padding-block:50px 24px}
.siteft__base{margin-top:24px}
#hafenviertel h2{font-size:clamp(32px,3.5vw,52px);max-width:24ch}
#hafenviertel .stories__grid{gap:6vw}
.band--teal h2{font-size:clamp(32px,3.5vw,52px);max-width:28ch}
.faq{max-width:none;display:grid;grid-template-columns:1fr 1fr;gap:0 40px;align-items:start}
@media(max-width:1100px) and (min-width:769px){
 .nav ul{gap:12px}.nav a{font-size:12px}.brand svg{width:24px}.masthead__in{gap:12px}.masthead>.wrap>.btn{margin-left:0}
 .hero{min-height:0}.hero__copy{padding-top:22vw}.hero-display{font-size:8.1vw}.hero-h1{font-size:16px}.hero-sub{font-size:15px}
 .stories__grid .idx{grid-column:auto}.plate{min-height:25vw}.route__grid .vshot{min-height:0}
 .band h2,.shotband h2{font-size:5.2vw}.band .lead,.shotband .lead{font-size:15px}.routefacts b{font-size:17px}.routefacts span{font-size:13px}
 .mag__lead{grid-column:auto}.siteft__grid{grid-template-columns:1fr 1.4fr .5fr}.siteft__mid{grid-column:auto;order:0;text-align:center}.ftnav{justify-content:center}
 .sidenote--top{position:absolute;text-align:right}.catrow b{font-size:16px}
}
@media(max-width:768px){
 .hero{height:780px;min-height:680px;max-height:100svh;--above:48%}.hero__copy{padding-top:30vh}.hero-display{font-size:74px;max-width:7ch}.hero__copy-bot{max-width:90%;padding-top:18px}.hero-sub{display:block;font-size:16px}.hero-h1{font-size:17px}.hero__bg img{object-position:48% center}
 .brand b{font-size:17px}.brand i{display:block;font-size:12px}.nav a{font-size:20px;padding:14px 0}.nav ul{gap:0}.nav>.btn{font-size:17px}
 .band,.shotband{padding-block:30px}.stories__grid,.kids__grid,.mag__grid{grid-template-columns:minmax(0,1fr)}.band h2,.shotband h2,.kids__grid h2{font-size:46px}.band .lead,.shotband .lead{font-size:18px}
 .plate{margin:10px 0;display:block}.plate__wide{position:static;width:100%}.plate__disc{position:absolute;width:66%;right:8%;top:0;margin:0}.idx{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 16px}.idx b{font-size:22px}.sidenote--marked{position:static;margin-bottom:0}
 .route__grid{width:100%;grid-template-columns:1fr 1fr}.route__grid>div:first-child{grid-column:1/-1}.route__grid h2{max-width:12ch}.routefacts{gap:18px}.routeline{align-self:center;padding:20px 0}.vshot{position:relative;grid-column:1/-1;width:calc(100% + 44px);height:230px;margin:0 -22px -30px;mask-image:linear-gradient(0deg,#000 80%,transparent);z-index:0}
 .shotband{min-height:490px;display:flex;align-items:flex-start}.shotband__in{max-width:85%}.shotband::before{background:linear-gradient(90deg,#062b34ee,#062b3470 70%,#062b3420)}.shotband__note{position:absolute;right:22px;bottom:10px;font-size:10px}.shotband:has(.catrow){min-height:620px}.catrow{position:static;grid-template-columns:repeat(3,1fr);margin-top:46px;gap:14px}.catrow b{font-size:16px}.catrow span{font-size:10.5px;letter-spacing:.1em}
 .ribbon{margin:10px 0 0}.sidenote--top{position:static;font-size:9px}.mag__lead h2{max-width:13ch}.story{min-height:390px}.story__cap b{font-size:32px}.story__cap p{font-size:18px}.story__cap{min-height:0}.faq{grid-template-columns:1fr}
 #hafenviertel .stories__grid{grid-template-columns:1fr!important}.siteft{padding-top:40px}.siteft__grid{gap:28px}.siteft__mid p{font-size:28px}
}
@media(min-width:769px){
 .hero__copy-bot{display:flex;flex-direction:column;align-items:flex-start}
 .hero-sub{order:-1;margin-bottom:6px}
 .hero-h1{font-size:clamp(14px,1.2vw,18px);margin-bottom:14px}
 .hero__copy .btn{padding-block:8px}
 .masthead .nav a{white-space:nowrap}
 .route__grid{grid-template-columns:1.25fr .9fr .46fr;width:76%}
 .routefacts b{font-size:clamp(16px,1.65vw,24px)}
}
@media(max-width:768px){.hero-display{max-width:11ch;font-size:70px}}
@media(min-width:769px) and (max-width:1024px){.masthead>.wrap>.btn{display:none}}
.shotband{min-height:clamp(380px,36vw,600px)}
.shotband:has(.catrow){min-height:clamp(440px,41vw,680px)}
.shotband>figure.ai-image img{object-position:52% 46%}
.shotband:has(.catrow)>figure.ai-image img{object-position:58% 40%}
.catrow{bottom:6px}
.kids__grid{grid-template-columns:1fr 2.6fr;gap:clamp(14px,2vw,30px);align-items:center}
.ribbon{margin-right:calc(-1 * var(--gut));margin-top:-10px;margin-bottom:-10px}
.ribbon img{width:100%}
@media(max-width:768px){
 .shotband{min-height:520px}
 .shotband:has(.catrow){min-height:660px}
 .shotband>figure.ai-image img{object-position:56% 44%}
 .kids__grid{grid-template-columns:1fr}
 .ribbon{margin:10px calc(-1 * var(--gut)) 0 calc(-1 * var(--gut))}
}
.shotband:not(:has(.catrow))>picture>img,
.shotband:not(:has(.catrow))>figure.ai-image img{object-position:52% 70%}
@media(max-width:400px){
 .idx{grid-template-columns:minmax(0,1fr)}
 .stories__grid>*{min-width:0}
}