:root{--ink:#152d30;--cream:#faf6ed;--gold:#f5d092;--night:#071f23}
*{box-sizing:border-box}
body{margin:0;background:var(--cream);color:var(--ink);font:17px/1.7 -apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif}
p,h1,h2,h3,figure{margin:0}
header,footer{background:var(--night);color:#eceadd}
nav,.bounds,.cover-copy{width:min(1180px,88%);margin:auto}
nav,nav div{display:flex;justify-content:space-between;align-items:center;gap:24px}
nav{min-height:64px;font-size:.87rem}
a{color:inherit;text-underline-offset:4px}nav a{text-decoration:none}nav a:hover{text-decoration:underline}
header nav div{flex-wrap:wrap;justify-content:flex-start}
.home-link{color:var(--gold)}
.mark{font:600 21px Georgia,serif;color:var(--gold)}
a:focus-visible,summary:focus-visible{outline:3px solid #a66328;outline-offset:4px}
.cover{background:#071d20 url('assets/focusplz/book-and-bottle.webp') center center/cover no-repeat;color:var(--cream);display:grid;align-items:center;min-height:clamp(535px,45vw,780px)}
.cover-copy{padding:3rem 0}
.meta,figcaption{font-size:.81rem;letter-spacing:.035em}
.meta{margin-bottom:18px}
.cover .meta,.star .meta{color:var(--gold)}
h1,h2,h3,.signature{font-family:Georgia,'Times New Roman',serif;font-weight:400;line-height:1.06;letter-spacing:-.045em}
h1{font-size:clamp(54px,5.5vw,86px)}h1 em,.star em,.sea em{color:var(--gold)}
.cover-story{max-width:min(48ch,50%);margin:24px 0 18px;color:#f1e8d9}
.cover-story p+p{margin-top:12px}
.cover-story em{font-family:Georgia,serif;color:var(--cream)}
.read{display:inline-flex;gap:28px;padding:8px 0;border-bottom:1px solid #cfad76;text-decoration:none;color:var(--gold)}
.bounds{padding:clamp(44px,5.8vw,85px) 0}
.chapter,.notebook{display:grid;grid-template-columns:1fr 1fr;gap:8%;align-items:center}
#session .chapter{align-items:start}
#session h2{margin-bottom:34px}
#session figure{text-align:center}
#session figure a{width:fit-content;max-width:100%;margin-inline:auto}
#session figure img{width:auto;max-width:100%;max-height:clamp(235px,20vw,290px)}
@media(min-width:741px){
  #session .chapter{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:4%}
  #session .copy p{max-width:54ch}
  #session figure{transform:translateX(-16px)}
  #session figure img{max-height:clamp(320px,30vw,435px)}
}
.notebook{margin-top:34px}
h2{font-size:clamp(40px,4.2vw,68px)}h3{font-size:clamp(30px,3vw,42px)}
.copy p{max-width:58ch}.copy p+p,.copy h2+p,.copy h3+p{margin-top:1em}
img{display:block;width:100%;border-radius:8px}
figure a{display:block}
figcaption{margin-top:8px}
.sea,.star{background:#102d32;color:#f4efe3}
.sea figure img{max-height:435px;object-fit:contain;background:#101828}
.sea figcaption,.star figcaption{color:#d7cbb3}
.notebook{grid-template-columns:1fr .68fr 1.4fr;gap:4%}
.notebook img{max-height:290px;object-fit:contain}
.notebook figure:first-child img{width:auto;max-width:100%;margin-inline:auto}
.star{background:#091f26}
.star figure img{max-height:370px;object-fit:contain}
.signature{font-style:italic;font-size:28px;color:var(--gold)}
summary{cursor:pointer;font:400 clamp(22px,2.4vw,34px) Georgia,serif}
.gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:26px}
.gallery img{height:165px;object-fit:contain;background:#16222f;margin-top:8px}
@media(max-width:740px){.cover{align-items:start;min-height:640px;padding-bottom:185px;background-size:auto 235px;background-position:70% bottom;background-color:#04191b}.cover-copy{padding-top:2.4rem}.cover-story{max-width:48ch;margin:20px 0 14px}.chapter,.notebook{grid-template-columns:1fr;gap:26px}.sea figure{order:1}.notebook{grid-template-columns:1fr 1fr}.notebook .copy{grid-column:1/-1}.gallery{grid-template-columns:1fr 1fr}.gallery img{height:125px}nav,nav div{gap:13px}h1{font-size:clamp(44px,10vw,64px)}}
.journal-slip,.letter-paper{padding:clamp(24px,3vw,46px);background:#fff9ea;color:#273b37;border-top:3px solid #c2a66f}
.journal-slip blockquote,.letter-paper blockquote{font:italic clamp(23px,2.2vw,35px)/1.35 Georgia,serif;margin:0 0 22px}
.bay{background:#e6eee9}
.bay-view{background:#163536 url('assets/focusplz/glimmer-bay.webp') center/cover no-repeat;color:#fff9eb}
.bay-view .bounds{min-height:clamp(320px,32vw,540px);display:flex;flex-direction:column;justify-content:center}
.bay-view h2{font-size:clamp(52px,6vw,92px)}
.bay-view .bounds>p{max-width:26ch;margin-top:15px}
.bay-letters{align-items:start}
.letter-paper summary{font:600 16px/1.5 system-ui;color:#235650}
.letter-paper details p{margin:16px 0;font:italic 20px/1.5 Georgia,serif}
.letter-paper small{display:block;border-top:1px solid #d9cfb6;margin-top:22px;padding-top:12px;color:#4e5d54}
@media(max-width:740px){header nav{flex-wrap:wrap;padding:10px 0;gap:4px 15px}.bay-view{background-position:68% center}.bay-view .bounds{justify-content:flex-start;padding-top:28px;text-shadow:0 1px 6px #091f22}}

#top{position:relative;isolation:isolate}
.story-trail{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;overflow:hidden}
.trail-line{fill:none;stroke:#b09360;stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round;opacity:.76}
.star-word{white-space:nowrap}
#from-an-idea .bounds{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);align-items:start;column-gap:5%;row-gap:32px}
.app-badge{justify-self:center;width:min(100%,clamp(180px,19vw,250px));text-align:center}
.app-icon{height:auto;border-radius:22%}
.app-badge figcaption{font:600 clamp(22px,2vw,29px)/1.2 Georgia,serif;letter-spacing:.02em}
#from-an-idea details{grid-column:1/-1}
@media(min-width:741px){
  .app-badge{margin-top:clamp(12px,1.05vw,17px)}
}
@media(max-width:740px){
  #from-an-idea .bounds{grid-template-columns:1fr;row-gap:26px}
  .app-badge{width:clamp(130px,39vw,180px)}
  #from-an-idea h2 em{display:block;padding-top:22px}
}
.pearl-face{fill:#fff5e3;stroke:currentColor;fill:color-mix(in srgb,currentColor 24%,#fffbea);stroke:color-mix(in srgb,currentColor 74%,#483342)}
.trail-finale{color:#64bca9}
.violet-finale .trail-finale{color:#a38ad0}
.trail-finale:not([transform]){display:none}
@media (prefers-reduced-motion:no-preference){
  .trail-finale .starlight{animation:star-glow 4.8s ease-in-out infinite alternate}
  @keyframes star-glow{from{opacity:.72}to{opacity:1}}
}
@media print{.story-trail{display:none}}