/*
Theme Name: LH Site
Description: Minimal portfolio theme: news, productions, writings, bio. Blue duotone pictures that turn to colour on hover.
Version: 1.0
Requires at least: 6.3
Requires PHP: 7.4
Text Domain: lh-site
*/
:root{--bg:#fff;--fg:#0a0a0a;--mute:#6f6f6f;--blue:#1c2dff;--onblue:#fff;
--h:"Inter Tight","Helvetica Neue",Arial,sans-serif;--t:Newsreader,Georgia,serif}
@media (prefers-color-scheme:dark){:root{--bg:#0a0a0a;--fg:#f4f4f4;--mute:#9a9a9a}}
*{box-sizing:border-box}
html{scroll-padding-top:5rem}
body{margin:0;background:var(--bg);color:var(--fg);font:1.2rem/1.55 var(--t);overflow-x:hidden}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
img{max-width:100%;height:auto;display:block}
.pad{padding-left:clamp(1rem,3vw,2.5rem);padding-right:clamp(1rem,3vw,2.5rem)}
/* header + menu */
.site-header{position:sticky;top:0;z-index:5;background:var(--bg);display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap;padding-top:1rem;padding-bottom:1rem;border-bottom:3px solid var(--blue)}
.admin-bar .site-header{top:32px}
.name{font:500 1.35rem/1 var(--h);letter-spacing:-.02em;color:var(--blue)}
.brand{display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap}
.tagline{font:400 1.1rem/1 var(--h);letter-spacing:-.01em}
.tagline .slash{color:var(--blue)}
.nav ul{display:flex;gap:.4rem;flex-wrap:wrap;list-style:none;margin:0;padding:0}
.nav a{display:block;font:400 1.1rem var(--h);padding:.15rem .6rem}
.nav a:hover,.nav .current-menu-item>a,.nav .current_page_item>a,.nav .current-menu-ancestor>a{background:var(--blue);color:var(--onblue)}
/* layout: heading on the side */
.lh-sec{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:2rem;padding:2.5rem 0 6rem}
.huge,.side h1,.side .back{font:400 clamp(1.7rem,3.6vw,3.4rem)/.95 var(--h);letter-spacing:-.045em;color:var(--blue);margin:0;hyphens:auto}
.side{position:sticky;top:6rem;align-self:start}
.side .back{display:block}
.side .sub{display:block;margin-top:1rem}
h1,h2,h3,h4{font-family:var(--h);font-weight:400;margin:0 0 .5rem;letter-spacing:-.03em;line-height:1.05}
h2{font-size:clamp(1.7rem,3.6vw,3rem)}
h3{font-size:1.5rem}
p{margin:.6rem 0 1rem;max-width:46ch}
.sub{font:400 1rem var(--h);color:var(--blue)}
/* pictures: blue duotone, colour on hover */
.lh-sec img{filter:url(#lh-duo)}
.lh-sec .item:hover img,.lh-sec a:hover img,.lh-sec img:hover,.lh-sec img.on,.lh-sec a:focus-visible img,.lh-sec .no-duo img{filter:none}
/* grid of cards: placements cycle automatically */
.g{display:grid;grid-template-columns:repeat(12,1fr);gap:1.5rem 1.2rem;align-items:start}
.item{display:block}
.g .item:nth-child(6n+1){grid-column:1/8}
.g .item:nth-child(6n+2){grid-column:9/13;margin-top:4rem}
.g .item:nth-child(6n+3){grid-column:2/7;margin-top:2rem}
.g .item:nth-child(6n+4){grid-column:7/13;margin-top:5rem}
.g .item:nth-child(6n+5){grid-column:1/6}
.g .item:nth-child(6n+6){grid-column:7/12;margin-top:3rem}
.cap{display:block;margin-top:.5rem}
.cap b{display:block;font:500 1.15rem/1.15 var(--h);letter-spacing:-.015em}
.cap .meta{display:block;color:var(--mute);font-size:1.05rem}
.cap .txt{display:block;max-width:40ch;margin-top:.4rem}
.item:hover b{color:var(--blue)}
.pagination{margin-top:3rem;font-family:var(--h)}
.pagination .page-numbers{padding:.2rem .6rem}.pagination .current{background:var(--blue);color:var(--onblue)}
/* single / page content */
.entry>*{max-width:100%}
.entry .wp-block-image{margin:0 0 1.5rem}
.entry figcaption{font:400 1rem var(--h);color:var(--mute)}
.entry .wp-block-columns{gap:1.5rem}
.entry .wp-block-group.has-background{padding:1.4rem}
.entry .has-blue-background-color h1,.entry .has-blue-background-color h2,.entry .has-blue-background-color h3{color:inherit}
.entry-title{font-size:clamp(1.8rem,4vw,3.4rem);margin-bottom:1rem}
.is-type{font:300 clamp(1.8rem,3.2vw,2.8rem)/1 var(--h);letter-spacing:-.04em;color:var(--blue);margin:.8rem 0 .2rem}
.is-type-sm{font:500 1.05rem/1.2 var(--h);color:var(--blue);margin:.35rem 0 0}
.is-title{font:500 1.3rem/1.15 var(--h);letter-spacing:-.02em;margin:0}
.is-title-lg{font:400 clamp(1.7rem,2.8vw,2.4rem)/1.05 var(--h);letter-spacing:-.035em;margin:.8rem 0 0}
.is-venue{font:400 1.05rem/1.3 var(--h);color:var(--mute);margin:.25rem 0 0}
.is-desc{font:400 1.1rem/1.5 var(--t);max-width:40ch;margin:.6rem 0 0}
/* utility classes: add under Advanced > Additional CSS class */
.offset-s{margin-top:2rem}.offset-m{margin-top:4rem}.offset-l{margin-top:7rem}
.narrow{max-width:30rem}.push-right{margin-left:auto}
.blue-block{background:var(--blue);color:var(--onblue);padding:1.4rem}
.site-footer{background:var(--blue);color:var(--onblue);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding-top:1.2rem;padding-bottom:1.2rem;font-family:var(--h)}
.site-footer ul{display:flex;gap:1.2rem;list-style:none;margin:0;padding:0}
@media(max-width:782px){.admin-bar .site-header{top:46px}}
@media(max-width:760px){.lh-sec{display:block}.side{position:static;margin-bottom:1.5rem}.g{display:block}.g .item{margin:0 0 2rem!important}.offset-m,.offset-l{margin-top:2rem}}