/* Heartease: a photographer's site. Midnight ink, warm paper, Jamaican gold. */
:root{--ink:#0a0f1a;--ink2:#121a2b;--paper:#f4ecdc;--paper2:#e9dcc0;--gold:#f2b705;--gold2:#ffd23f;--green:#1e8f4e;--coral:#e4572e;
--fg:#f3f0e8;--mut:#a8b0c2;--line:rgba(255,255,255,.12);--serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
--sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;--r:.6rem}
*{box-sizing:border-box}html{scroll-behavior:smooth;background:var(--ink)}
body{margin:0;background:var(--ink);color:var(--fg);font:1.0625rem/1.65 var(--sans);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}a{color:var(--gold2)}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--gold2);outline-offset:3px;border-radius:.25rem}
.wrap{max-width:76rem;margin:0 auto;padding:0 1.25rem}
.skip{position:absolute;left:-999px;top:0;background:#fff;color:#000;padding:.6rem 1rem;z-index:99}.skip:focus{left:0}
/* header */
.top{position:fixed;inset:0 0 auto 0;z-index:30;transition:background .3s,backdrop-filter .3s}
.top.solid,.top.always{background:rgba(10,15,26,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:4rem}
.brand{font:700 1.35rem/1 var(--serif);color:#fff;text-decoration:none;letter-spacing:.01em}.brand span{color:var(--gold)}
.top nav ul{display:flex;gap:.25rem;list-style:none;margin:0;padding:0}
.top nav a{display:block;padding:.55rem .8rem;color:#fff;text-decoration:none;font-size:.92rem;letter-spacing:.04em;text-transform:uppercase;border-radius:.4rem}
.top nav a:hover{color:var(--gold2)}.top nav a[aria-current]{color:var(--gold2);box-shadow:inset 0 -2px 0 var(--gold)}
.menu{display:none}
@media (max-width:52rem){.menu{display:block}.menu summary{list-style:none;cursor:pointer;color:#fff;padding:.6rem .9rem;border:1px solid var(--line);border-radius:.4rem;font-size:.9rem;letter-spacing:.06em;text-transform:uppercase}
.menu summary::-webkit-details-marker{display:none}.top nav.full{display:none}.menu ul{position:absolute;right:1rem;top:3.6rem;background:var(--ink2);border:1px solid var(--line);border-radius:var(--r);padding:.5rem;min-width:13rem;display:block;list-style:none;margin:0}
.menu ul a{display:block;padding:.7rem .9rem;color:#fff;text-decoration:none}}
/* hero */
.hero{position:relative;min-height:100svh;display:grid;align-items:end;isolation:isolate;overflow:hidden}
.hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transform:scale(1.04);animation:drift 24s ease-out forwards}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(10,15,26,.55) 0,rgba(10,15,26,0) 28%,rgba(10,15,26,.2) 55%,rgba(10,15,26,.92) 100%)}
@keyframes drift{to{transform:scale(1)}}
.hero .copy{padding:0 0 clamp(2.5rem,8vh,5rem)}
.eyebrow{font-size:.85rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold2);margin:0 0 .75rem}
.hero h1{font:700 clamp(3rem,11vw,9rem)/.92 var(--serif);margin:0;letter-spacing:-.02em;text-shadow:0 2px 30px rgba(0,0,0,.35)}
.hero h1 em{font-style:italic;color:var(--gold2)}
.hero p.sub{font-size:clamp(1.1rem,2.4vw,1.5rem);max-width:34rem;margin:1rem 0 1.75rem;color:#fff;opacity:.92}
.cta{display:inline-flex;gap:.6rem;align-items:center;background:var(--gold);color:#1a1300;padding:.9rem 1.5rem;border-radius:99rem;font-weight:700;text-decoration:none;letter-spacing:.02em;transition:transform .2s,background .2s}
.cta:hover{background:var(--gold2);transform:translateY(-2px)}.cta.ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.5);margin-left:.5rem}.cta.ghost:hover{background:rgba(255,255,255,.1)}
.scroll{position:absolute;left:50%;bottom:1rem;color:#fff;opacity:.7;font-size:.75rem;letter-spacing:.3em;text-transform:uppercase;transform:translateX(-50%)}
/* sections */
section.block{padding:clamp(3.5rem,9vw,7rem) 0}
.kicker{font-size:.8rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin:0 0 .6rem}
h2{font:700 clamp(2rem,5vw,3.6rem)/1.05 var(--serif);margin:0 0 1.25rem;letter-spacing:-.01em}h3{font:600 1.35rem/1.2 var(--serif);margin:0 0 .4rem}
.lead{font:clamp(1.15rem,2.2vw,1.5rem)/1.5 var(--serif);max-width:42rem;color:#e7e2d6}
/* places mosaic */
.places{display:grid;grid-template-columns:repeat(12,1fr);gap:.9rem;list-style:none;margin:2rem 0 0;padding:0}
.place{position:relative;grid-column:span 4;aspect-ratio:4/5;border-radius:var(--r);overflow:hidden;background:var(--ink2)}
.place.wide{grid-column:span 8;aspect-ratio:16/10}.place.tall{aspect-ratio:3/4}
.place img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.place a{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:1.1rem;color:#fff;text-decoration:none}
.place a::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(10,15,26,.88));pointer-events:none}
.place .name,.place .meta{position:relative;z-index:1}
.place:hover img,.place:focus-within img{transform:scale(1.07)}
.place .name{font:700 clamp(1.4rem,2.6vw,2rem)/1.05 var(--serif)}.place .meta{font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold2);margin-top:.3rem}
@media (max-width:52rem){.place,.place.wide{grid-column:span 6}.place.wide{aspect-ratio:4/5}}
@media (max-width:34rem){.places{gap:.6rem}.place,.place.wide{grid-column:span 12;aspect-ratio:4/3}}
/* gallery */
.masonry{columns:3 17rem;column-gap:.8rem;list-style:none;margin:2rem 0 0;padding:0}
.masonry li{break-inside:avoid;margin:0 0 .8rem;border-radius:var(--r);overflow:hidden;background:var(--ink2)}
.masonry a{display:block;position:relative}.masonry img{width:100%;transition:transform .6s,filter .3s}
.masonry a:hover img{transform:scale(1.04)}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .8s,transform .8s}.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}.hero>img{animation:none;transform:none}html{scroll-behavior:auto}.place img,.masonry img{transition:none}}
/* paper section */
.paper{background:var(--paper);color:#1d1a12}.paper .kicker{color:#8a5d00}.paper a{color:#7a4f00}.paper .lead{color:#2a2518}
.about{display:grid;grid-template-columns:minmax(0,22rem) 1fr;gap:clamp(1.5rem,5vw,4rem);align-items:center}
.about img{border-radius:var(--r);box-shadow:0 30px 60px -25px rgba(0,0,0,.45)}
@media (max-width:48rem){.about{grid-template-columns:1fr}.about figure{max-width:20rem}}
/* bar */
.bar-card{display:grid;grid-template-columns:1.1fr 1fr;border-radius:calc(var(--r)*1.5);overflow:hidden;background:linear-gradient(135deg,#1b2a1f,#0e1a14);border:1px solid rgba(242,183,5,.25)}
.bar-card .body{padding:clamp(1.5rem,4vw,3rem)}.bar-card .art{min-height:18rem;background:center/cover}
@media (max-width:48rem){.bar-card{grid-template-columns:1fr}}
.bar-list{list-style:none;margin:1.25rem 0 0;padding:0;display:grid;gap:.1rem}.bar-list li{display:flex;justify-content:space-between;gap:1rem;border-bottom:1px dashed rgba(242,183,5,.3);padding:.55rem 0}
.bar-list a{color:#fff;text-decoration:none}.bar-list a:hover{color:var(--gold2)}.bar-list .meta{color:var(--mut);font-size:.9rem}
/* inner pages */
.page-hero{position:relative;min-height:62svh;display:grid;align-items:end;isolation:isolate;overflow:hidden}
.page-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.page-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(10,15,26,.6),rgba(10,15,26,.1) 35%,rgba(10,15,26,.9))}
.page-hero h1{font:700 clamp(2.6rem,9vw,6.5rem)/.95 var(--serif);margin:0 0 .5rem;letter-spacing:-.02em}.page-hero .copy{padding:0 0 clamp(1.5rem,5vw,3.5rem)}
.plain-hero{padding:8.5rem 0 2rem}.plain-hero h1{font:700 clamp(2.4rem,7vw,5rem)/1 var(--serif);margin:0}
.prose{max-width:44rem}.prose p{margin:0 0 1.1rem}.prose h2{font-size:1.7rem;margin-top:2.2rem}
.crumb{font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}.crumb a{color:var(--gold2);text-decoration:none}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;margin:1rem 0 0;padding:0}.chips a{display:block;padding:.45rem .9rem;border:1px solid var(--line);border-radius:99rem;color:#fff;text-decoration:none;font-size:.9rem}.chips a:hover{border-color:var(--gold);color:var(--gold2)}
.pager{display:flex;justify-content:space-between;gap:1rem;margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--line)}
/* footer */
.foot{border-top:1px solid var(--line);padding:3rem 0 2.5rem;color:var(--mut);background:#070b13}
.foot .cols{display:flex;flex-wrap:wrap;gap:2rem 4rem;justify-content:space-between}.foot a{color:#fff}.foot ul{list-style:none;margin:.4rem 0 0;padding:0}.foot li{margin:.25rem 0}.foot .brand{font-size:1.6rem}
/* lightbox */
dialog.lb{border:0;padding:0;background:transparent;max-width:100vw;max-height:100vh;width:100vw;height:100vh;color:#fff}
dialog.lb::backdrop{background:rgba(5,8,14,.94)}
.lb figure{margin:0;height:100%;display:grid;grid-template-rows:1fr auto;place-items:center;padding:3.5rem 3.5rem 1rem}
.lb img{max-height:calc(100vh - 8rem);max-width:100%;width:auto;object-fit:contain;border-radius:.35rem}
.lb figcaption{padding:.9rem 0 0;text-align:center;color:#d6d9e2;font-size:.95rem;max-width:46rem}
.lb button{position:absolute;background:rgba(255,255,255,.1);border:1px solid var(--line);color:#fff;width:2.9rem;height:2.9rem;border-radius:50%;cursor:pointer;font-size:1.3rem}
.lb button:hover{background:rgba(255,255,255,.22)}.lb .x{top:1rem;right:1rem}.lb .p{left:.8rem;top:50%}.lb .n{right:.8rem;top:50%}
@media (max-width:40rem){.lb figure{padding:3.5rem .5rem 1rem}.lb .p,.lb .n{top:auto;bottom:1rem}}

/* hero slideshow */
.slides{position:absolute;inset:0;z-index:-2}
.slides .slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.8s ease;transform:scale(1.06)}
.slides .slide.on{opacity:1;animation:kb 9s ease-out forwards}
@keyframes kb{from{transform:scale(1.07)}to{transform:scale(1)}}
.slide-ui{position:absolute;right:1.25rem;bottom:1.25rem;display:flex;gap:.6rem;align-items:center}
.slide-cap{color:#fff;text-decoration:none;font-size:.85rem;letter-spacing:.14em;text-transform:uppercase;padding:.5rem .9rem;border:1px solid rgba(255,255,255,.4);border-radius:99rem;background:rgba(10,15,26,.35);backdrop-filter:blur(6px)}
.slide-cap:hover{border-color:var(--gold2);color:var(--gold2)}
.slide-cap::after{content:" \2192"}
.slide-ctl{cursor:pointer;color:#fff;background:rgba(10,15,26,.35);border:1px solid rgba(255,255,255,.4);border-radius:99rem;padding:.5rem .9rem;font:inherit;font-size:.85rem;letter-spacing:.1em;text-transform:uppercase}
.slide-ctl:hover{border-color:var(--gold2);color:var(--gold2)}
.scroll{display:none}
@media (prefers-reduced-motion:reduce){.slides .slide{transition:none;animation:none!important;transform:none}.slide-ctl{display:none}}

/* journal home */
.narrow{max-width:50rem}.intro{padding-bottom:1rem}
.lead.big{font-size:clamp(1.35rem,3vw,2rem);line-height:1.4}
.toc{list-style:none;margin:2rem 0 0;padding:0;display:grid;gap:.1rem}
.toc a{display:flex;gap:1rem;align-items:baseline;padding:.7rem 0;border-bottom:1px solid var(--line);color:#fff;text-decoration:none;font:600 1.15rem/1.2 var(--serif);transition:padding .25s,color .25s}
.toc a span{color:var(--gold);font:600 .85rem/1 var(--sans);letter-spacing:.2em}.toc a:hover{padding-left:.6rem;color:var(--gold2)}
.chapter{padding:clamp(3.5rem,9vw,7rem) 0;position:relative}
.chapter:nth-of-type(even){background:linear-gradient(180deg,rgba(255,255,255,.025),transparent)}
.chead{max-width:76rem;margin:0 auto 2.2rem;padding:0 1.25rem;display:grid;grid-template-columns:auto 1fr;gap:0 clamp(1rem,3vw,2.5rem);align-items:end}
.chead .num{font:700 clamp(4.5rem,13vw,10rem)/.8 var(--serif);color:transparent;-webkit-text-stroke:1.5px rgba(242,183,5,.6)}
.chead h2{margin:0 0 .6rem}.chead .note{max-width:36rem;margin:0;color:#d9d4c6;font-size:1.1rem}
@media (max-width:40rem){.chead{grid-template-columns:1fr}.chead .num{font-size:4.5rem;margin-bottom:.4rem}}
.frame{margin:0;position:relative}.frame>a{display:block;overflow:hidden;border-radius:var(--r);background:var(--ink2)}
.frame img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.7,.2,1)}.frame>a:hover img{transform:scale(1.05)}
.frame figcaption,.bleed figcaption{font-size:.85rem;color:var(--mut);padding:.6rem .1rem 0;line-height:1.35}
.frame figcaption a,.bleed figcaption a{color:var(--gold2);text-decoration:none;font-weight:600;letter-spacing:.06em;text-transform:uppercase;font-size:.75rem;margin-right:.4rem}
.lay-a{display:grid;grid-template-columns:repeat(12,1fr);gap:.9rem;grid-auto-rows:auto}
.lay-a .m{grid-column:1/9;grid-row:1/3}.lay-a .m>a{height:100%;aspect-ratio:16/10.5}.lay-a .s{grid-column:9/13}.lay-a .s>a{aspect-ratio:4/3}
.lay-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:.9rem;margin-top:.9rem}.lay-row .r>a{aspect-ratio:16/10}
.lay-b{display:grid;grid-template-columns:repeat(4,1fr);gap:.9rem;align-items:start}.lay-b .p>a{aspect-ratio:3/4}.lay-b .p:nth-child(even){margin-top:3.5rem}.lay-b .p:nth-child(3){margin-top:1.5rem}
.bleed{margin:0 0 .9rem;position:relative}.bleed a{display:block;overflow:hidden}.bleed img{width:100%;height:min(76vh,48rem);object-fit:cover;border-radius:0}
.bleed figcaption{position:absolute;left:1.25rem;bottom:1rem;color:#fff;text-shadow:0 1px 12px rgba(0,0,0,.6);max-width:30rem;padding:0}
.lay-d{display:grid;grid-template-columns:repeat(4,1fr);gap:.9rem}.lay-d .q>a{aspect-ratio:1/1}
.lay-e{display:grid;grid-template-columns:1.5fr 1fr;gap:.9rem;align-items:start}.lay-e .m>a{aspect-ratio:4/3}.lay-e .stack{display:grid;gap:.9rem}.lay-e .s>a{aspect-ratio:3/2}
@media (max-width:52rem){.lay-a .m{grid-column:1/13;grid-row:auto}.lay-a .s{grid-column:span 6}.lay-b,.lay-d{grid-template-columns:repeat(2,1fr)}.lay-b .p:nth-child(n){margin-top:0}.lay-b .p:nth-child(even){margin-top:1.8rem}.lay-e{grid-template-columns:1fr}}
.more{margin:1.6rem 0 0;color:var(--mut)}.more a{display:inline-block;margin:0 .4rem .3rem 0;padding:.35rem .85rem;border:1px solid var(--line);border-radius:99rem;color:#fff;text-decoration:none;font-size:.9rem}.more a:hover{border-color:var(--gold);color:var(--gold2)}
.atlas{padding-bottom:3rem}.strip{display:flex;gap:.9rem;list-style:none;margin:2rem 0 0;padding:0 1.25rem 1.25rem;overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.strip li{flex:0 0 min(70vw,16rem);scroll-snap-align:start}.strip a{display:block;position:relative;aspect-ratio:3/4;border-radius:var(--r);overflow:hidden;color:#fff;text-decoration:none}
.strip img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s}.strip a:hover img{transform:scale(1.07)}
.strip a::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(10,15,26,.9))}
.strip .name,.strip .meta{position:absolute;left:1rem;z-index:1}.strip .name{bottom:2.4rem;font:700 1.4rem/1.1 var(--serif)}.strip .meta{bottom:1rem;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold2)}
button.cta{border:1px solid rgba(255,255,255,.5);font:inherit;font-weight:700;cursor:pointer}
.masonry li:target{outline:3px solid var(--gold);outline-offset:3px}

.chapter .bleed{width:100vw;margin-left:calc(50% - 50vw);margin-right:0}
.lay-e{align-items:stretch}.lay-e .m{display:flex;flex-direction:column}.lay-e .m>a{flex:1;aspect-ratio:auto;min-height:22rem}.lay-e .m img{height:100%}

.place-note{margin:2.5rem 0 0;padding:1.4rem 1.6rem;border-left:3px solid var(--gold);background:rgba(242,183,5,.06);border-radius:0 var(--r) var(--r) 0;font:clamp(1.15rem,2.2vw,1.4rem)/1.5 var(--serif);max-width:46rem}
.place-note p{margin:0}

.heartease{color:var(--gold2);font-style:italic;margin-top:1.2rem}
.paper p:not(.lead):not(.kicker){max-width:38rem}
body{overflow-x:clip}
.chapter{overflow-x:clip}

.portraits{position:relative;aspect-ratio:4/5;border-radius:var(--r);overflow:hidden;box-shadow:0 30px 60px -25px rgba(0,0,0,.45);background:#222}
.pt{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.4s ease;border-radius:0}.pt.on{opacity:1}
.pt-ctl{margin-top:.7rem;background:none;border:1px solid rgba(0,0,0,.35);color:#4a3a14;border-radius:99rem;padding:.35rem .9rem;font:inherit;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.pt-ctl:hover{background:rgba(0,0,0,.06)}
@media (prefers-reduced-motion:reduce){.pt{transition:none}.pt-ctl{display:none}}
/* mobile fixes */
.hero .copy,.page-hero .copy{padding-left:1.25rem;padding-right:1.25rem}
.lay-a>*,.lay-e>*,.lay-b>*,.lay-d>*{min-width:0}
@media (max-width:52rem){.lay-a .m>a{height:auto;aspect-ratio:4/3}.lay-a .m img{height:100%}}

/* the bar menu */
.bar-menu{display:grid;grid-template-columns:repeat(auto-fit,minmax(20rem,1fr));gap:2.5rem 4rem;padding-top:3rem;padding-bottom:5rem}
.menu-sec h2{font-size:clamp(1.6rem,3vw,2.2rem);margin:0;color:var(--gold2)}.menu-sub{color:var(--mut);margin:.2rem 0 1.2rem;font-style:italic}
.menu-list{list-style:none;margin:0;padding:0}.menu-list li{padding:.7rem 0;border-bottom:1px solid var(--line)}
.menu-list a{display:flex;align-items:baseline;gap:.5rem;color:#fff;text-decoration:none;font:600 1.15rem/1.3 var(--serif)}.menu-list a:hover .mi-name{color:var(--gold2)}
.mi-dots{flex:1;border-bottom:2px dotted rgba(242,183,5,.4);transform:translateY(-.25rem);min-width:1rem}
.mi-date{font:.8rem/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}
.menu-list p{margin:.3rem 0 0;color:#cfcabc;font-size:.95rem}