@font-face{font-family:"Bodoni Moda";src:url(fonts/BodoniModa.woff2) format("woff2");font-weight:400 900;font-display:swap}
@font-face{font-family:"Bodoni Moda";src:url(fonts/BodoniModa-Italic.woff2) format("woff2");font-weight:400 900;font-style:italic;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url(fonts/CormorantGaramond.woff2) format("woff2");font-weight:300 700;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url(fonts/CormorantGaramond-Italic.woff2) format("woff2");font-weight:300 700;font-style:italic;font-display:swap}
@font-face{font-family:"Inter";src:url(fonts/Inter.woff2) format("woff2");font-weight:100 900;font-display:swap}
:root{--night:#0B0C0F;--abyss:#0F1A23;--garnet:#4E1520;--gold:#C8B07A;--bone:#E8E1D4;--pewter:#7E8486;--tile:#15171C}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--night)}
body.hb{background:var(--night);color:var(--bone);font-family:"Cormorant Garamond",Georgia,serif;font-size:20px;line-height:1.55;-webkit-font-smoothing:antialiased}
.hb a{color:inherit;text-decoration:none}
.hb img{display:block;max-width:100%}
.hw{max-width:1280px;margin:0 auto;padding:0 40px}
.lab{font-family:Inter,system-ui,sans-serif;font-size:11px;letter-spacing:.28em;text-transform:uppercase;font-weight:500}
.disp{font-family:"Bodoni Moda",Didot,serif;font-weight:400;font-variation-settings:"opsz" 96;letter-spacing:.02em;line-height:1.08}
.ital{font-family:"Bodoni Moda",Didot,serif;font-style:italic;font-variation-settings:"opsz" 60}
.gold{color:var(--gold)}
.hair{height:1px;background:var(--gold);opacity:.7;border:0}
/* top bar */
.hbar{border-bottom:1px solid rgba(200,176,122,.35)}
.hbar .in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:76px}
.hbar .back{justify-self:start;color:var(--pewter)}
.hbar .back:hover{color:var(--bone)}
.hbar .wm{display:flex;flex-direction:column;align-items:center;gap:6px}
.hbar .wm img{height:20px;width:auto}
.hbar .wm span{color:var(--gold);font-size:10px;letter-spacing:.42em}
.hbar nav{justify-self:end;display:flex;gap:28px}
.hbar nav a{color:var(--pewter)}.hbar nav a:hover,.hbar nav a.on{color:var(--gold)}
/* hero */
.hhero{display:grid;grid-template-columns:1.1fr 1fr;min-height:640px;border-bottom:1px solid rgba(200,176,122,.35)}
.hhero .pic{position:relative;overflow:hidden;background:#000}
.hhero .pic img{width:100%;height:100%;object-fit:cover}
.hhero .copy{display:flex;flex-direction:column;justify-content:center;padding:64px 72px;gap:26px;background:radial-gradient(120% 90% at 20% 30%,rgba(78,21,32,.45),rgba(11,12,15,0) 60%)}
.hhero .em{height:84px;width:auto}
.hhero h1{font-size:64px;font-weight:400}
.hhero h1 em{display:block;font-style:italic;color:var(--gold);font-size:.62em;margin-top:14px}
.hhero p{max-width:440px;color:#cfc8ba}
.note{font-family:Inter,system-ui,sans-serif;font-size:13px;line-height:1.5;color:var(--pewter);letter-spacing:.01em}
.note b{color:var(--bone);font-weight:500}
.hhero .note{border-top:1px solid rgba(200,176,122,.35);padding-top:18px;max-width:440px}
/* site-v13 hero (the engraved squid graphic is retired). HERO picks the option: A emblem, B photo, C type. */
.hx{position:relative;overflow:hidden;border-bottom:1px solid rgba(200,176,122,.35);background:var(--night)}
.hx .lock{height:30px;width:auto}
.hx h1{font-weight:400}
.hx .devil{font-family:"Bodoni Moda",Didot,serif;font-style:italic;color:var(--bone)!important;line-height:1.35}
.hx .intro{color:#cfc8ba}
.hx .note{padding-top:16px;border-top:1px solid rgba(200,176,122,.35)}
.hx .rule{display:block;height:1px;background:rgba(200,176,122,.55)}
.hx .kick{color:var(--gold);font-size:11px;letter-spacing:.42em}
/* A: champagne Fin Bar emblem on Midnight, hairlines, space */
.hxA{padding:92px 0 84px;background:radial-gradient(60% 70% at 50% 40%,rgba(78,21,32,.22),rgba(11,12,15,0) 70%),var(--night)}
.hxA .frame{position:relative;max-width:1180px;margin:0 auto;padding:0 32px}
.hxA .frame:before,.hxA .frame:after{content:"";position:absolute;left:32px;right:32px;height:1px;background:rgba(200,176,122,.4)}
.hxA .frame:before{top:-40px}.hxA .frame:after{bottom:-36px}
.hxA .in{display:flex;flex-direction:column;align-items:center;text-align:center;gap:22px}
.hxA .em{height:210px;width:auto;margin:22px 0 10px;filter:drop-shadow(0 1px 0 rgba(255,255,255,.04)) drop-shadow(0 14px 30px rgba(0,0,0,.45))}   /* site-v20: gold Fin Bar on the crimson fin (emblem-v4 G, T.'s pick), same 210 px height as the site-v14 emblem, soft drop shadow, no glow */
.hxA h1{font-size:60px;letter-spacing:.12em;text-transform:uppercase;font-size:44px}
.hxA .tag1{font-size:24px;margin-top:-8px}
.hxA .rule{width:72px}
.hx .rdm{height:240px;width:auto;margin:18px 0 6px;filter:drop-shadow(0 14px 30px rgba(0,0,0,.45))}   /* site-v22: the Dart, T.'s Red Devil pick */
.coll .head .hm{display:block;height:96px;width:auto;margin-bottom:16px}   /* site-v22: Harbour Gilt Fin H */
@media(max-width:700px){.hx .rdm{height:180px}.coll .head .hm{height:72px}}
.hxA .devil{font-size:24px;max-width:660px}
.hxA .intro{max-width:600px}
.hxA .note{max-width:600px}
/* B: full-bleed photograph, darkened, type over it */
.hxB{min-height:720px;display:flex;align-items:center}
.hxB .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 50%}
.hxB:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,12,15,.94) 0%,rgba(11,12,15,.82) 34%,rgba(11,12,15,.25) 64%,rgba(11,12,15,.45) 100%),linear-gradient(0deg,rgba(11,12,15,.85),rgba(11,12,15,0) 30%)}
.hxB .in{position:relative;z-index:1;max-width:1440px;width:100%;margin:0 auto;padding:80px 72px;display:flex;flex-direction:column;gap:22px;align-items:flex-start}
.hxB .in>*{max-width:520px}
.hxB h1{font-size:70px;line-height:1.02}
.hxB .tag1{font-size:26px;margin-top:-6px}
.hxB .rule{width:72px}
.hxB .devil{font-size:24px}
/* C: typographic only */
.hxC{padding:104px 0 92px;background:radial-gradient(70% 80% at 50% 45%,rgba(78,21,32,.30),rgba(11,12,15,0) 70%),var(--night)}
.hxC .in{display:flex;flex-direction:column;align-items:center;text-align:center;gap:24px;max-width:1100px;margin:0 auto;padding:0 32px}
.hxC h1{font-size:118px;line-height:.98;letter-spacing:-.005em}
.hxC h1 span{display:block;font-size:.42em;letter-spacing:.32em;text-transform:uppercase;color:var(--gold);margin-bottom:18px}
.hxC .rule{width:120px;margin:10px 0}
.hxC .devil{font-size:28px;max-width:720px}
.hxC .intro,.hxC .note{max-width:620px}
/* collections */
.coll{padding:96px 0}
.coll .head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-bottom:40px}
.coll .head h2{font-size:52px;letter-spacing:.24em;text-transform:uppercase}
.coll .head .line{font-size:30px;color:var(--gold);text-align:right}
.coll .head .sub{margin-top:10px;color:#bdb6a8;font-size:19px}
.coll .split{display:flex;gap:22px;margin-top:16px}
.coll .split a{color:var(--gold);border-bottom:1px solid rgba(200,176,122,.5);padding-bottom:3px}
.coll.light .split a{color:var(--garnet);border-color:rgba(78,21,32,.4)}
.sub-row+.sub-row{margin-top:56px}
.rowh{display:flex;align-items:center;gap:18px;color:var(--gold);margin-bottom:22px;font-size:12px}
.rowh::after{content:"";flex:1;height:1px;background:rgba(200,176,122,.45)}
.coll.light .rowh{color:var(--garnet)}.coll.light .rowh::after{background:rgba(126,132,134,.5)}
.pc .tag{color:var(--pewter);font-size:10px}
.pc.soon{align-items:center;justify-content:center;text-align:center;gap:18px;border-style:dashed;background:transparent}
.pc.soon img{height:56px;width:auto;opacity:.55}
.pc.soon p{font-size:22px;color:#4A5258}
.hgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.pc{background:var(--tile);border:1px solid rgba(200,176,122,.55);padding:14px;display:flex;flex-direction:column;gap:16px}
.pc .ph{display:block;overflow:hidden}
.pc .ph img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;transition:transform .6s ease}
.pc:hover .ph img{transform:scale(1.03)}
.pc .meta{padding:4px 8px 10px;display:flex;flex-direction:column;gap:8px}
.pc h3{font-family:"Bodoni Moda",Didot,serif;font-weight:400;font-size:22px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);font-variation-settings:"opsz" 28}
.pc p{font-size:18px;color:#c9c2b4;line-height:1.4}
.pc .row{display:flex;justify-content:space-between;align-items:center;margin-top:6px}
.pc .pt{color:var(--pewter)}
.pc .cs{color:var(--bone);border:1px solid rgba(200,176,122,.6);padding:7px 12px}
.pc.hero{grid-column:span 2;grid-row:span 2}
.pc.hero h3{font-size:30px}
.coll.light{background:#EFE9DE;color:var(--night)}
.coll.light .head .line{color:var(--garnet)}
.coll.light .head .sub{color:#4A5258}
.coll.light .pc{background:#F6F2EA;border-color:rgba(126,132,134,.6)}
.coll.light .pc h3{color:var(--night)}
.coll.light .pc p{color:#4A5258}
.coll.light .pc .cs{color:var(--night);border-color:rgba(126,132,134,.8)}
.aft{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.duo{display:grid;grid-template-columns:repeat(2,1fr);gap:28px}
.duo .pc h3{font-size:30px}
.aft .pc.hero{grid-column:1/-1;grid-row:auto;display:grid;grid-template-columns:1.25fr 1fr;gap:40px;align-items:end;padding:18px}
.aft .pc.hero .meta{padding:0 18px 22px;gap:14px}
.aft .pc.hero h3{font-size:38px}
.aft .pc.hero p{font-size:21px;max-width:420px}
/* swatches */
.sw{display:flex;gap:10px;flex-wrap:wrap}
.sd{width:26px;height:26px;border-radius:50%;border:1px solid rgba(200,176,122,.35);background:none;padding:3px;cursor:pointer}
.sd i{display:block;width:100%;height:100%;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.sd.on{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold)}
.sd:focus-visible{outline:1px solid var(--gold);outline-offset:3px}
.coll.light .sd{border-color:rgba(126,132,134,.5)}.coll.light .sd.on{border-color:var(--night);box-shadow:0 0 0 1px var(--night)}
.hpdp .sd{width:34px;height:34px}
.hpdp .cl{color:var(--pewter)}.hpdp .cl .cn{color:var(--bone)}
.hpdp .pick{display:flex;flex-direction:column;gap:12px}
/* story */
.hstory{padding:110px 0;border-top:1px solid rgba(200,176,122,.35);background:radial-gradient(80% 120% at 85% 20%,rgba(78,21,32,.35),rgba(11,12,15,0) 60%)}
.hstory .in{display:grid;grid-template-columns:1fr 1.4fr;gap:72px;align-items:start}
.hstory h2{font-size:44px}
.hstory p+p{margin-top:18px}
/* footer */
.hfoot{border-top:1px solid rgba(200,176,122,.35);padding:56px 0 64px}
.hfoot .in{display:flex;flex-direction:column;align-items:center;gap:22px;text-align:center}
.hfoot .em{height:44px;width:auto}
.hfoot .sq{height:22px;width:auto;opacity:.9}
.hfoot .links{display:flex;gap:28px;color:var(--pewter)}
.hfoot .links a:hover{color:var(--gold)}
/* product page */
.crumb{padding:26px 0;color:var(--pewter)}
.crumb a:hover{color:var(--gold)}
.hpdp{display:grid;grid-template-columns:1.15fr 1fr;gap:64px;padding-bottom:96px;align-items:start}
.hpdp .main{border:1px solid rgba(200,176,122,.55);padding:14px;background:var(--tile)}
.hpdp .main img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover}
.hpdp .info{display:flex;flex-direction:column;gap:22px;padding-top:12px}
.hpdp h1{font-size:46px;letter-spacing:.06em}
.hpdp .line{font-size:24px;color:var(--gold)}
.hpdp .sub2{color:var(--pewter)}
.hpdp .price{color:var(--pewter)}
.hpdp .desc{color:#d6cfc1}
.hpdp ul{list-style:none;border-top:1px solid rgba(200,176,122,.35)}
.hpdp li{padding:12px 0;border-bottom:1px solid rgba(200,176,122,.2);font-size:18px;color:#c9c2b4}
.hbtn{font-family:Inter,system-ui,sans-serif;font-size:12px;letter-spacing:.3em;text-transform:uppercase;background:transparent;color:var(--gold);border:1px solid var(--gold);padding:18px 24px;cursor:not-allowed;opacity:.8;width:100%}
.hpdp .note{border:1px solid rgba(200,176,122,.35);padding:14px 16px}
.more{padding:0 0 96px}
.more h2{font-size:30px;letter-spacing:.2em;text-transform:uppercase;margin-bottom:28px}
@media (max-width:900px){
 .hw{padding:0 20px}
 .hbar .in{grid-template-columns:1fr auto;height:auto;padding:16px 20px;row-gap:12px}
 .hbar .wm{grid-column:1/-1;grid-row:1;justify-self:center}
 .hbar .back{grid-row:2}.hbar nav{grid-row:2;gap:16px}
 .hhero{grid-template-columns:1fr;min-height:0}
 .hx .lock{height:24px}.hx .devil{font-size:21px!important}
 .hxA{padding:64px 0 60px}.hxA .em{height:140px}.hxA h1{font-size:28px;letter-spacing:.1em}.hxA .tag1{font-size:21px}.hxA .frame:before{top:-28px}.hxA .frame:after{bottom:-28px}.hxA .frame{padding:0 22px}.hxA .frame:before,.hxA .frame:after{left:22px;right:22px}
 .hxB{min-height:0;display:block}.hxB .bg{position:relative;inset:auto;height:300px;object-position:62% 50%}.hxB:after{background:linear-gradient(0deg,rgba(11,12,15,1) 0,rgba(11,12,15,0) 220px) top/100% 300px no-repeat}.hxB .in{padding:0 22px 48px;margin-top:-70px}.hxB h1{font-size:44px}.hxB .tag1{font-size:21px}
 .hxC{padding:64px 0 56px}.hxC h1{font-size:54px}.hxC h1 span{font-size:.36em;letter-spacing:.24em}.hxC .in{padding:0 22px}
 .hbar .wm img{height:17px}
 .hhero .pic img{aspect-ratio:1/1;height:auto}
 .hhero .copy{padding:40px 22px}
 .hhero h1{font-size:44px}
 .coll{padding:64px 0}
 .coll .head{flex-direction:column;align-items:flex-start;gap:12px}
 .coll .head h2{font-size:34px}
 .coll .head .line{text-align:left;font-size:24px}
 .hgrid,.aft,.duo{grid-template-columns:1fr}
 .pc.hero,.aft .pc.hero{grid-column:auto;grid-row:auto}
 .aft .pc.hero{display:flex;gap:16px;padding:14px}.aft .pc.hero .meta{padding:4px 8px 10px}.aft .pc.hero h3{font-size:26px}
 .hstory{padding:64px 0}.hstory .in{grid-template-columns:1fr;gap:24px}.hstory h2{font-size:34px}
 .hpdp{grid-template-columns:1fr;gap:28px}
 .hpdp h1{font-size:34px}
 .hfoot .links{flex-wrap:wrap;justify-content:center;gap:14px 22px}
}

/* site-v27: West Coast Web & Digital "Brands by" credit, centred under the note */
.hfoot .wcwd-credit{display:inline-block;line-height:0}
.hfoot .wcwd-credit img{display:block;height:32px;width:auto;max-width:100%;opacity:.9}