:root{--navy:#0f2340;--night:#081424;--sand:#fcf4e2;--paper:#f3e6c8;--gold:#e0a53a;--coral:#e9674f;--sea:#1b8fa8;--ink:#2a2520;
--serif:'Cormorant Garamond',Georgia,serif;--disp:'Abril Fatface',Georgia,serif;--type:'Special Elite','Courier New',monospace;--sans:Inter,system-ui,sans-serif}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--serif);font-size:21px;line-height:1.6;color:var(--ink);background:var(--paper)}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.wrap{width:min(1180px,90vw);margin:0 auto}
.bar{position:sticky;top:0;z-index:20;background:var(--night);color:var(--sand)}
.bar .wrap{display:flex;justify-content:space-between;align-items:center;height:64px}
.mark{font-family:var(--disp);font-size:22px;text-decoration:none}
.bar nav{display:flex;gap:24px;align-items:center;font-family:var(--type);font-size:13px;letter-spacing:3px}
.bar nav a{text-decoration:none}.bar nav a[aria-current]{color:var(--gold)}
.btn{display:inline-block;font-family:var(--sans);font-weight:700;font-size:13px;letter-spacing:1.5px;text-transform:uppercase;padding:12px 20px;border-radius:4px;text-decoration:none;background:var(--gold);color:var(--navy);box-shadow:3px 3px 0 var(--navy)}
.kicker{font-family:var(--type);font-size:13px;letter-spacing:4px;text-transform:uppercase;color:var(--coral)}
h1,h2,h3{font-family:var(--disp);font-weight:400;line-height:1.02;color:var(--navy);text-wrap:balance}

/* blog home */
.masthead{background:linear-gradient(180deg,#0b1d36,#16476b 70%,#1b8fa8);color:var(--sand);padding:80px 0 70px;position:relative;overflow:hidden}
.masthead::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 79px,rgba(252,244,226,.06) 79px 80px),repeating-linear-gradient(90deg,transparent 0 79px,rgba(252,244,226,.06) 79px 80px);pointer-events:none}
.masthead h1{color:var(--sand);font-size:clamp(56px,9vw,120px);margin:14px 0 10px}
.masthead p{font-style:italic;font-size:26px;max-width:38ch;opacity:.9}
.masthead .kicker{color:var(--gold)}
.feature{display:grid;grid-template-columns:1.2fr 1fr;gap:0;margin:-40px auto 70px;background:var(--sand);box-shadow:0 30px 60px rgba(15,35,64,.2);position:relative;z-index:2;text-decoration:none}
.feature img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.feature .txt{padding:44px;display:flex;flex-direction:column;justify-content:center;gap:14px}
.feature h2{font-size:clamp(34px,3.6vw,52px)}
.feature:hover h2{color:var(--coral)}
.meta{font-family:var(--type);font-size:13px;letter-spacing:2px;color:#6b5638}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;padding-bottom:100px}
.card{text-decoration:none;display:flex;flex-direction:column;gap:12px;background:var(--sand);padding:14px 14px 26px;box-shadow:0 12px 30px rgba(15,35,64,.12);transition:transform .25s}
.card:nth-child(odd){transform:rotate(-.8deg)}.card:nth-child(even){transform:rotate(.8deg)}
.card:hover{transform:rotate(0) translateY(-6px)}
.card img{aspect-ratio:3/2;object-fit:cover;width:100%}
.card .in{padding:0 8px;display:flex;flex-direction:column;gap:10px}
.card h3{font-size:28px}
.card p{font-size:19px;line-height:1.5}
.tag{align-self:flex-start;font-family:var(--type);font-size:11px;letter-spacing:3px;border:1.5px solid var(--sea);color:var(--sea);padding:3px 8px}
.section-h{display:flex;align-items:center;gap:16px;margin-bottom:30px}
.section-h::after{content:"";flex:1;height:1px;background:rgba(15,35,64,.25)}

/* single */
.post-hero{position:relative;height:min(70vh,640px);overflow:hidden;background:var(--night)}
.post-hero img{width:100%;height:100%;object-fit:cover;opacity:.75}
.post-hero .cap{position:absolute;inset:auto 0 0;padding:120px 0 50px;background:linear-gradient(transparent,rgba(8,20,36,.9));color:var(--sand)}
.post-hero h1{color:var(--sand);font-size:clamp(42px,6vw,84px);max-width:16ch;margin:12px 0}
.post-hero .kicker{color:var(--gold)}
.post-hero .meta{color:rgba(252,244,226,.8)}
.article{width:min(700px,90vw);margin:0 auto;padding:70px 0 40px}
.article>p{margin-bottom:1.1em}
.article>p:first-of-type::first-letter{font-family:var(--disp);float:left;font-size:92px;line-height:.8;padding:8px 12px 0 0;color:var(--coral)}
.article h2{font-size:40px;margin:1.4em 0 .5em}
.article blockquote{font-size:30px;font-style:italic;line-height:1.35;color:var(--navy);border-left:4px solid var(--gold);padding-left:26px;margin:1.4em 0}
.article figure{margin:2em -60px}
.article figcaption{font-family:var(--type);font-size:13px;letter-spacing:1px;color:#6b5638;margin-top:10px;text-align:center}
.logentry{font-family:var(--type);font-size:16px;background:var(--sand);border:1px solid rgba(15,35,64,.2);padding:20px 24px;box-shadow:6px 6px 0 rgba(15,35,64,.1);margin:1.6em 0;transform:rotate(-.6deg)}
.signoff{font-family:var(--disp);font-size:30px;color:var(--navy);margin-top:30px}
.cta-book{display:grid;grid-template-columns:180px 1fr;gap:30px;align-items:center;background:var(--navy);color:var(--sand);padding:30px;margin:50px 0 30px;border-radius:6px}
.cta-book h3{color:var(--sand);font-size:30px;margin-bottom:8px}
.cta-book p{font-size:19px;margin-bottom:16px}
.more{padding:60px 0 100px;border-top:1px solid rgba(15,35,64,.2)}
.pager{display:flex;justify-content:space-between;gap:20px;font-family:var(--type);font-size:14px;letter-spacing:2px;margin-top:20px}
.pager a{text-decoration:none}
.sample{background:var(--gold);color:var(--navy);font-family:var(--type);font-size:13px;letter-spacing:2px;text-align:center;padding:8px 16px}
footer{background:#050c16;color:rgba(252,244,226,.6);text-align:center;padding:40px 20px;font-family:var(--type);font-size:13px;letter-spacing:2px}
@media(max-width:860px){
  .feature,.cta-book{grid-template-columns:1fr}.grid{grid-template-columns:1fr}
  .feature .txt{padding:28px}.article figure{margin:2em 0}.bar nav a:not(.btn){display:none}
  .cta-book img{max-width:160px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

.logo{display:block;height:30px;width:auto;color:var(--sand)}

/* back-to-top: gold ring fills as you scroll */
.totop{position:fixed;right:22px;bottom:calc(22px + env(safe-area-inset-bottom,0px));z-index:70;width:56px;height:56px;padding:0;border:0;border-radius:50%;background:rgba(8,20,36,.88);backdrop-filter:blur(6px);cursor:pointer;box-shadow:0 10px 24px rgba(0,0,0,.4);opacity:0;transform:translateY(20px) scale(.8);pointer-events:none;transition:opacity .35s,transform .35s cubic-bezier(.2,.9,.2,1.3)}
.totop.show{opacity:1;transform:none;pointer-events:auto}
.totop:hover{transform:translateY(-3px)}
.totop:hover .tt-arrow{stroke:var(--gold)}
.totop svg{width:100%;height:100%;transform:rotate(-90deg)}
.tt-track{fill:none;stroke:rgba(252,244,226,.18);stroke-width:3}
.tt-prog{fill:none;stroke:var(--gold);stroke-width:3;stroke-linecap:round;stroke-dasharray:157.08;stroke-dashoffset:157.08}
.tt-arrow{fill:none;stroke:var(--sand);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;transform:rotate(90deg);transform-origin:28px 28px;transition:stroke .2s}
@media(max-width:600px){.totop{right:14px;width:48px;height:48px}}
@media(prefers-reduced-motion:reduce){.totop{transition:none}}