/* James Bell theme. System fonts, one column, one link colour. */
:root{
	--jb-col:clamp(632px,62vw,760px); /* 62% of the window, never under 632px or over 760px; on phones the page padding is what limits it */
	--jb-sans:"Helvetica Neue",Helvetica,Arial,sans-serif;
	--jb-serif:Charter,"Bitstream Charter","Sitka Text",Cambria,serif;
	--jb-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
	--jb-ink:#1A1A1A;--jb-muted:#6B6B6B;--jb-link:#0B57D0;--jb-edge:#E6E6E0;--jb-code:#F0F0EB;--jb-leader:#C4C4BE;
	--jb-arrow-r:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.5 5H8.5M6 2.5L8.5 5L6 7.5'/%3E%3C/svg%3E");
	--jb-arrow-l:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.5 5H1.5M4 2.5L1.5 5L4 7.5'/%3E%3C/svg%3E");
	--jb-arrow-ext:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7L7 3M3.5 3H7V6.5'/%3E%3C/svg%3E");
}
html{color-scheme:light;scrollbar-gutter:stable}
body{-webkit-text-size-adjust:100%}

/* Links: blue in the writing; ink in the site chrome. */
a{text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid #0B57D0;outline-offset:3px;border-radius:2px}

/* Skip link */
.jb-skip{position:absolute;left:-9999px;top:12px;z-index:100;background:#fff;color:var(--jb-ink);padding:10px 16px;border-radius:6px;box-shadow:0 0 0 1px var(--jb-edge);font:16px var(--jb-sans);text-decoration:underline}
.jb-skip:focus{left:16px}

/* The column */
.jb-col{max-width:var(--jb-col);margin-inline:auto;width:100%;box-sizing:border-box}
.jb-main{margin-top:0}
.jb-main>*+*{margin-block-start:0}

/* Header */
.jb-header{margin-block:0 48px}
.jb-headbar{gap:12px 24px;align-items:baseline;font-family:var(--jb-sans);font-size:17px}
.jb-headbar .wp-block-site-title{font-family:var(--jb-sans);margin:0;font-size:17px;font-weight:700;line-height:1.5}
.jb-header a,.jb-footer a{color:var(--jb-ink);text-decoration:none}
.jb-header a:hover,.jb-footer a:hover,.jb-header a:focus-visible,.jb-footer a:focus-visible,.jb-nav [aria-current="page"]{text-decoration:underline;text-decoration-thickness:1px}
.jb-nav .wp-block-navigation__container,.jb-footnav .wp-block-navigation__container{gap:2px 20px;flex-wrap:wrap}
.jb-nav .wp-block-navigation-item__content,.jb-footnav .wp-block-navigation-item__content{padding:0}

/* Sticky footer: sits at the bottom of the window on short pages, straight after the content on long ones */
.wp-site-blocks{display:flex;flex-direction:column;min-height:calc(100vh - 48px)}
.wp-site-blocks>.jb-footer{margin-top:auto}
.jb-main{padding-bottom:24px}
.jb-main:has(.jb-updated){padding-bottom:0;display:flex;flex-direction:column;flex:1 0 auto}
/* Short pages: "Last updated" stays with the footer rule, not with the text */
.jb-main:has(.jb-updated)>.jb-updated{margin-top:auto;padding-top:48px;margin-bottom:0}
.jb-main>:last-child,.jb-main .jb-year:last-child{margin-bottom:0}

/* Footer */
.jb-footbar{padding:16px 0 40px;font-family:var(--jb-sans);font-size:17px;line-height:1.4;display:flex;flex-direction:column;gap:2px}
.jb-footbar>*{margin-block:0}
.jb-rule{width:20%;height:2px;background:var(--jb-ink);margin:0 0 10px}
.jb-footnav-site{margin-bottom:14px}
@media (max-width:600px){
	.jb-footbar{gap:14px}
	.jb-footnav-site{margin-bottom:6px}
	.jb-footnav.jb-ext .wp-block-navigation__container{display:grid;grid-template-columns:1fr 1fr;gap:6px 16px}
	.jb-footnav.jb-ext .wp-block-navigation-item__content{display:block}
}
@media (max-width:400px){
	.jb-footnav.jb-ext .wp-block-navigation__container{grid-template-columns:1fr}
}
.jb-copy{margin:14px 0 0;font-size:14px;line-height:1.5;color:var(--jb-muted)}
.jb-footer .jb-copy{font:14px/1.5 var(--jb-sans)}

/* Arrows: drawn with CSS masks so they inherit the text colour. Right/left = on this site; diagonal = another site. */
.jb-arrow-r::after,.jb-arrow-l::before,.jb-ext a::after{content:"";display:inline-block;width:10px;height:10px;background:currentColor;opacity:.6;-webkit-mask:var(--a) center/contain no-repeat;mask:var(--a) center/contain no-repeat}
.jb-arrow-r::after{--a:var(--jb-arrow-r);margin-left:5px}
.jb-arrow-l::before{--a:var(--jb-arrow-l);margin-right:5px}
.jb-ext a::after{--a:var(--jb-arrow-ext);width:9px;height:9px;margin-left:4px;vertical-align:1px}

/* Titles and dates */
.jb-title{font-family:var(--jb-sans);font-weight:700;overflow-wrap:anywhere;margin-block:0 10px}
.jb-page .jb-title,.jb-title:is(h1){margin-block-end:10px}
h1.jb-title{font-size:clamp(30px,6vw,40px);line-height:1.15;letter-spacing:-.02em}
.jb-title-front{font-size:clamp(26px,5vw,32px);line-height:1.2;letter-spacing:-.015em}
.jb-title a,.jb-title a:visited{color:var(--jb-ink);text-decoration:none}
.jb-title a:hover,.jb-title a:focus-visible{color:var(--jb-ink);text-decoration:underline;text-decoration-thickness:2px}
.jb-date{margin-block:0 40px;font:400 16px/1.5 var(--jb-sans);color:var(--jb-muted)}
.jb-page .jb-title{margin-block-end:32px}

/* Featured image under the heading (pages and posts) */
.jb-entry .jb-date+.jb-featured{margin-top:-16px}
.jb-featured{margin-block:0 32px}
.jb-featured img{display:block;width:100%;height:auto;background:#ECECE8;border-radius:4px}
/* Front page only: cap the height, crop from the centre */
.jb-feed .jb-featured img{max-height:480px;object-fit:cover;object-position:center}

/* The feed of full posts */
.jb-feed .wp-block-post-template{display:flex;flex-direction:column;gap:64px;list-style:none;margin:0;padding:0}
.jb-feed .wp-block-post-template>li{margin:0}
.jb-feed .jb-date{margin-block-end:24px}
.jb-feed{margin-block-end:64px}
.jb-more{margin-block:0;font:17px/1.6 var(--jb-sans)}
.jb-pager{display:flex;justify-content:space-between;margin-top:64px;font-size:17px}

/* Writing */
.wp-block-post-content>*{margin-block:0 24px}
.wp-block-post-content>*:last-child{margin-bottom:0}
.wp-block-post-content :is(h2,h3,h4,h5){margin-block:40px 16px}
.wp-block-post-content>:first-child{margin-top:0}
.wp-block-post-content :is(p,li,blockquote,dd,figcaption){overflow-wrap:break-word}
.wp-block-post-content ul,.wp-block-post-content ol{padding-left:1.3em;font-family:var(--jb-serif);font-size:21px;line-height:1.6}
.wp-block-post-content li{margin:0}
.wp-block-post-content ul{list-style:disc}
.wp-block-post-content .wp-block-footnotes{font:15px/1.6 var(--jb-sans);list-style:decimal}
.wp-block-post-content li>ul,.wp-block-post-content li>ol{margin-block:6px 0}
.wp-block-post-content a{color:var(--jb-link)}
.wp-block-post-content a:hover{color:#083F99}
.wp-block-post-content .wp-block-footnotes a{color:var(--jb-link)}

/* Page lead */
.jb-page .wp-block-post-content>p:first-child{font-size:22px;line-height:1.55}

/* Quote and pullquote: italic, indented, no border */
.wp-block-quote,.wp-block-pullquote{margin:32px 0;padding:0 0 0 24px;border:0;text-align:left;font-style:italic}
.wp-block-pullquote{padding-block:0}
.wp-block-quote p,.wp-block-pullquote p{font-style:italic;margin:0 0 12px}
.wp-block-quote cite,.wp-block-pullquote cite{display:block;font:15px var(--jb-sans);font-style:normal;color:var(--jb-muted)}

/* Code */
.wp-block-code,pre.wp-block-preformatted{margin:0 0 24px;padding:18px 20px;background:var(--jb-code);border-radius:6px;overflow-x:auto;font:15px/1.6 var(--jb-mono)}
.wp-block-code code{background:none;padding:0;font:inherit}
:not(pre)>code{background:var(--jb-code);padding:2px 5px;border-radius:4px;font:.9em var(--jb-mono)}

/* Images, gallery, embeds */
.wp-block-image{margin-block:32px}
.wp-block-image img,.wp-block-gallery img{background:#ECECE8;border-radius:4px;height:auto;max-width:100%}
.wp-block-image figcaption,.wp-block-gallery figcaption,.wp-block-embed figcaption{margin-top:10px;font:15px/1.5 var(--jb-sans);color:var(--jb-muted);text-align:left}
.wp-block-gallery{gap:16px}
.wp-block-embed{margin-block:32px}
.wp-block-embed iframe{max-width:100%;border:0}
.wp-block-embed.is-type-video .wp-block-embed__wrapper{position:relative;aspect-ratio:16/9}
.wp-block-embed.is-type-video .wp-block-embed__wrapper iframe{position:absolute;inset:0;width:100%;height:100%}
.wp-block-embed.wp-has-aspect-ratio .wp-block-embed__wrapper::before{content:none}

/* Nothing breaks out of the column: no wide or full alignment. Floated images stay at the column edge. */
.wp-block-post-content>.alignwide,.wp-block-post-content>.alignfull{max-width:var(--jb-col);margin-inline:auto;width:100%}
.wp-block-post-content>.alignright,.wp-block-post-content>.wp-block-image.alignright{float:right;max-width:calc(var(--jb-col)*.5);margin:6px max(0px,calc((100% - var(--jb-col))/2)) 16px 28px}
.wp-block-post-content>.alignleft,.wp-block-post-content>.wp-block-image.alignleft{float:left;max-width:calc(var(--jb-col)*.5);margin:6px 28px 16px max(0px,calc((100% - var(--jb-col))/2))}
.wp-block-post-content>.alignright,.wp-block-post-content>.alignleft{width:calc(var(--jb-col)*.5)}
.wp-block-post-content>.alignright img,.wp-block-post-content>.alignleft img{width:100%;height:auto}
@media (max-width:600px){
	.wp-block-post-content>.alignright,.wp-block-post-content>.alignleft,.wp-block-post-content>.wp-block-image.alignright,.wp-block-post-content>.wp-block-image.alignleft{float:none;width:100%;max-width:100%;margin:32px 0}
	.wp-block-post-content>.alignright img,.wp-block-post-content>.alignleft img{width:100%;height:auto}
}
.wp-block-post-content::after{content:"";display:block;clear:both}

/* Table */
.wp-block-table{margin-block:32px}
.wp-block-table table{border-collapse:collapse;width:100%;font:16px/1.5 var(--jb-sans)}
.wp-block-table th,.wp-block-table td{padding:8px 12px;border:0;text-align:left}
.wp-block-table thead{border:0}
.wp-block-table th{font-weight:700}
.wp-block-table tbody tr:nth-child(even){background:var(--jb-code)}
.wp-block-table figcaption{font:15px var(--jb-sans);color:var(--jb-muted)}

/* Buttons */
.wp-block-button__link{background:var(--jb-ink);color:#FAFAF8;border-radius:6px;font:17px var(--jb-sans);padding:10px 20px;text-decoration:none}
.wp-block-button__link:hover{background:#000;color:#fff}
.wp-block-button.is-style-outline .wp-block-button__link{background:transparent;color:var(--jb-ink);box-shadow:inset 0 0 0 1px var(--jb-ink);border:0}

/* Details */
.wp-block-details{margin-block:0 24px;font-family:var(--jb-serif);font-size:21px}
.wp-block-details summary{cursor:pointer;font-family:var(--jb-sans);font-weight:700}

/* Footnotes */
.wp-block-post-content .wp-block-footnotes,.wp-block-footnotes{margin-top:40px;padding-left:1.3em;font:15px/1.6 var(--jb-sans);color:var(--jb-muted)}
.wp-block-post-content .wp-block-footnotes li{margin-bottom:6px;font:15px/1.6 var(--jb-sans)}
sup.fn,.wp-block-post-content sup{font-size:12px}

/* Separator: space only */
.wp-block-separator{border:0;background:none;height:48px;margin:0;opacity:1}

/* Cards */
.jb-card{background:#fff;box-shadow:0 0 0 1px var(--jb-edge);border-radius:8px}
.jb-intro{padding:28px 32px;margin-bottom:64px}
.jb-intro p{margin:0;font-family:var(--jb-serif);font-size:22px;line-height:1.55}
.jb-intro p+p{margin-top:24px}
.jb-reply{padding:24px 28px;margin-top:48px;font:17px/1.6 var(--jb-sans)}
.jb-reply p{margin:0;font:17px/1.6 var(--jb-sans)}
.jb-reply p+p{margin-top:16px}

/* Post navigation */
.jb-postnav{margin-block:48px 0;font:17px/1.5 var(--jb-sans)}
.jb-postnav a{color:var(--jb-link)}
.jb-pn-pair{display:grid;grid-template-columns:1fr 1fr;gap:24px 32px}
.jb-pn{display:block;min-width:0;text-decoration:none}
.jb-pn-label{display:block;font-size:15px;color:var(--jb-muted)}
.jb-pn-title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;text-decoration:underline;overflow-wrap:anywhere}
.jb-pn-next{text-align:right}
.jb-postnav .jb-archive-link{display:block;margin-top:32px;text-align:center}
@media (max-width:600px){
	.jb-pn-pair{grid-template-columns:1fr}
	.jb-pn-next{text-align:left}
	.jb-pn-empty{display:none}
}
.jb-updated{margin-block:0;font:15px/1.5 var(--jb-sans);color:var(--jb-muted)}

/* Archive rows */
.jb-intro-line{margin-block:0 48px;font-family:var(--jb-serif);font-size:21px;line-height:1.6;color:#444}
.jb-year{margin-bottom:48px}
.jb-year h2{margin:0 0 16px;font:700 22px/1.3 var(--jb-sans)}
.jb-rows{list-style:none;margin:0;padding:0}
.jb-row{display:flex;align-items:baseline;gap:12px;margin:0;padding:5px 0;font-family:var(--jb-serif);font-size:19px;line-height:1.4}
.jb-row-title{overflow-wrap:anywhere}
.jb-leader{flex:1 1 24px;min-width:24px;border-bottom:1px dotted var(--jb-leader);transform:translateY(-4px)}
.jb-row time{flex:none;font:15px var(--jb-sans);color:var(--jb-muted);white-space:nowrap}
.jb-list>.jb-rows{margin-bottom:48px}
.jb-empty{margin-bottom:48px}

/* Search field */
.jb-search{margin-bottom:40px}
.jb-search .wp-block-search__inside-wrapper{gap:8px}
.jb-search input[type=search]{font:17px var(--jb-sans);padding:10px 12px;border:1px solid var(--jb-leader);border-radius:6px;background:#fff;color:var(--jb-ink)}
.jb-search .wp-element-button{background:var(--jb-ink);color:#FAFAF8;border:0;border-radius:6px;font:17px var(--jb-sans);padding:10px 18px}

/* Small screens */
@media (max-width:480px){
	html body{padding-inline:16px}
	.jb-intro{padding:20px}
	.jb-reply{padding:20px}
	.jb-title-front{font-size:26px}
	h1.jb-title{font-size:30px}
}
@media (max-width:600px){
	.jb-row{display:grid;grid-template-columns:1fr auto;column-gap:16px;align-items:start;padding-block:8px}
	.jb-leader{display:none}
	.jb-row time{padding-top:4px}
}
@media (pointer:coarse){
	.jb-header a,.jb-footer nav a{display:inline-block;padding-block:10px}
}

/* Print */
@media print{
	.jb-header,.jb-footer,.jb-reply,.jb-postnav,.jb-skip,.jb-more{display:none!important}
	body{background:#fff;color:#000;padding:0}
	.wp-block-post-content a[href^="http"]::after{content:" (" attr(href) ")";font:12px var(--jb-sans);word-break:break-all}
	.jb-card{box-shadow:none}
}
