/* The Ship Lounge: full artwork, free reading, warm brass. */
.hsl-door,.hsl-page { color:#f4ecdd; background:#171712; }
.hsl-door *,.hsl-page * { box-sizing:border-box; }
.hsl-door { max-width:1360px; margin:80px auto; padding:0 36px; background:transparent; scroll-margin-top:110px; }
.hsl-door-inner { border:1px solid #b79a634d; background:#191d17; }
.hsl-door figure { margin:0; }
.hsl-door .hsl-art { display:block; border-bottom:1px solid #b79a634d; }
.hsl-door img { width:100%; height:auto; display:block; }
.hsl-door-copy { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.8fr); gap:40px; padding:35px 42px 38px; align-items:center; }
.hsl-door .hsl-kicker,.hsl-page .hsl-kicker { margin:0 0 14px; color:#d5b979; font:11px/1.6 Arial,sans-serif; text-transform:uppercase; letter-spacing:.16em; }
.hsl-door h2 { margin:0 0 14px; font:clamp(34px,4vw,54px)/1.12 Georgia,serif; color:#f4ecdd; letter-spacing:-.025em; }
.hsl-door p { margin:0; font:16px/1.75 Arial,sans-serif; max-width:46ch; color:#d9dbd1; }
.hsl-actions { display:flex; align-items:center; gap:14px 25px; flex-wrap:wrap; }
.hsl-button { display:inline-flex; align-items:center; justify-content:center; gap:18px; min-height:48px; padding:13px 20px; border:1px solid #d5b979; background:#d5b979; color:#171712; font:600 14px/1.5 Arial,sans-serif; text-decoration:none; border-radius:2px; }
.hsl-button:hover { background:#f0ddad; border-color:#f0ddad; color:#171712; }
.hsl-text-link { font:14px/1.6 Arial,sans-serif; color:#e4c98d; text-decoration:underline; text-underline-offset:5px; }
.hsl-door .hsl-small,.hsl-page .hsl-small { margin:15px 0 0; color:#b9bdb1; font:12px/1.7 Arial,sans-serif; max-width:none; }
.hsl-door a:focus-visible,.hsl-page a:focus-visible { outline:3px solid #f0ddad; outline-offset:6px; }
.hsl-page { margin:0; font:16px/1.75 Arial,sans-serif; min-height:100vh; }
.hsl-page .hsl-skip { position:absolute; top:0; left:-10000px; }
.hsl-page .hsl-skip:focus { left:20px; top:15px; z-index:10; background:#f4ecdd; color:#171712; padding:10px 15px; }
.hsl-header { max-width:1500px; margin:auto; padding:28px 50px; display:flex; align-items:center; justify-content:space-between; gap:20px; border-bottom:1px solid #b79a632b; }
.hsl-brand { color:#f4ecdd; text-decoration:none; font:15px/1.4 Georgia,serif; letter-spacing:.13em; }
.hsl-header nav { display:flex; gap:25px; flex-wrap:wrap; }
.hsl-header nav a { color:#cbcdbf; font:12px/1.6 Arial,sans-serif; text-decoration:none; }
.hsl-header nav a:hover { color:#f0ddad; }
.hsl-main { max-width:1500px; margin:auto; padding:0 50px; }
.hsl-intro { max-width:900px; padding:66px 0 35px; }
.hsl-intro h1 { margin:0 0 20px; color:#f4ecdd; font:clamp(48px,7vw,88px)/1.06 Georgia,serif; letter-spacing:-.04em; }
.hsl-intro h1 em { color:#d5b979; font-weight:normal; }
.hsl-intro .hsl-deck { max-width:52ch; color:#d2d5c9; font:18px/1.75 Arial,sans-serif; margin:0; }
.hsl-figure { margin:15px 0 0; }
.hsl-figure a { display:block; }
.hsl-figure img { display:block; width:100%; height:auto; border:1px solid #b79a6355; }
.hsl-figure figcaption { display:flex; justify-content:space-between; flex-wrap:wrap; gap:5px 30px; margin:12px 0 0; color:#aeb3a4; font:12px/1.75 Arial,sans-serif; }
.hsl-figure figcaption a { display:inline; color:#d5b979; text-underline-offset:4px; }
.hsl-read { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.85fr); gap:60px; margin:62px 0 0; padding:45px 0; border-top:1px solid #b79a634d; scroll-margin-top:30px; }
.hsl-read h2 { margin:0 0 20px; color:#f4ecdd; font:clamp(32px,4vw,48px)/1.15 Georgia,serif; letter-spacing:-.025em; }
.hsl-read p { color:#d2d5c9; max-width:52ch; margin:0 0 20px; }
.hsl-reading-actions { align-self:center; padding:28px; border:1px solid #b79a634d; background:#1d211a; }
.hsl-reading-actions .hsl-spec { margin:0 0 20px; font:13px/1.6 Arial,sans-serif; color:#d5b979; }
.hsl-reading-actions .hsl-button { width:100%; }
.hsl-reading-actions .hsl-text-link { display:inline-block; margin-top:18px; }
.hsl-reading-actions .hsl-small { margin-top:19px; }
.hsl-foot { margin:10px 0 0; padding:24px 0 35px; border-top:1px solid #b79a632b; display:flex; justify-content:space-between; gap:15px 35px; flex-wrap:wrap; color:#9fa793; font:12px/1.7 Arial,sans-serif; }
.hsl-foot a { color:#d5b979; text-underline-offset:4px; }
@media(max-width:760px) {
 .hsl-door { margin:45px auto; padding:0 20px; }
 .hsl-door-copy { grid-template-columns:1fr; gap:25px; padding:27px 24px 30px; }
 .hsl-header { padding:22px 24px; align-items:flex-start; }
 .hsl-header nav { gap:10px 15px; justify-content:flex-end; }
 .hsl-main { padding:0 24px; }
 .hsl-intro { padding:45px 0 25px; }
 .hsl-intro h1 { font-size:55px; }
 .hsl-intro .hsl-deck { font-size:16px; }
 .hsl-read { grid-template-columns:1fr; gap:20px; margin-top:35px; padding:30px 0; }
 .hsl-reading-actions { padding:24px; }
}
@media(max-width:360px) {
 .hsl-header,.hsl-main { padding-left:18px; padding-right:18px; }
 .hsl-header { gap:14px; }
 .hsl-brand { font-size:13px; }
 .hsl-header nav { gap:8px; }
 .hsl-header nav a { font-size:11px; }
 .hsl-intro h1 { font-size:47px; }
 .hsl-reading-actions { padding:20px; }
 .hsl-door { padding:0 16px; }
 .hsl-door-copy { padding:24px 20px; }
}
