/*
Theme Name: Main Theme
Author: Keith Murdoch
Author URI: https://keithmurdoch.co.uk/
Description: A quiet, editorial portfolio theme for keithmurdoch.co.uk
Version: 10.0
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
*/

:root { --ink:#161615; --muted:#77736d; --paper:#f8f7f3; --line:#d9d6ce; --serif:Iowan Old Style, Baskerville, Times New Roman, serif; --sans:Helvetica Neue, Helvetica, Arial, sans-serif; --mono:American Typewriter, Courier New, Courier, monospace; }
*, *::before, *::after { box-sizing:border-box; }
html { background:var(--paper); }
body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:16px; line-height:1.55; text-rendering:optimizeLegibility; }
a { color:inherit; text-decoration-thickness:1px; text-underline-offset:.18em; }
a:hover, a:focus-visible { color:var(--muted); }
img { display:block; max-width:100%; height:auto; }

#wrapper { width:min(1440px, 100%); margin:0 auto; padding:clamp(1.5rem, 4vw, 4.5rem); display:grid; grid-template-columns:minmax(11rem, 20rem) minmax(0, 1fr); column-gap:clamp(2rem, 7vw, 9rem); }
#site-heading { grid-column:1; }
.site-name { margin:0; }
.site-name { font-size:clamp(1.05rem, 1.4vw, 1.35rem); font-weight:700; letter-spacing:.015em; }
.site-name a { text-decoration:none; }
#sidebar { margin-top:clamp(3rem, 8vh, 7rem); }
#sidebar nav::before { display:block; margin-bottom:.8rem; color:var(--muted); content:"Explore"; font-family:var(--mono); font-size:.68rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; }
#menu { margin:0; padding:1rem 0 0; list-style:none; border-top:1px solid rgba(22, 22, 21, .25); counter-reset:navigation; }
#menu li { position:relative; margin:0 0 .9rem; padding-left:2.15rem; counter-increment:navigation; }
#menu li::before { position:absolute; top:.4rem; left:0; color:var(--muted); content:"0" counter(navigation); font-family:var(--mono); font-size:.62rem; font-weight:700; letter-spacing:.08em; }
#menu a { position:relative; display:inline-block; font-family:var(--mono); font-size:1.12rem; line-height:1.25; text-decoration:none; }
#menu a::after { position:absolute; right:0; bottom:-.35rem; left:0; height:1px; content:""; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .2s ease; }
#menu .current_page_item a, #menu a:hover, #menu a:focus-visible { color:var(--muted); }
#menu .current_page_item a::after, #menu a:hover::after, #menu a:focus-visible::after { transform:scaleX(1); }

main.wrap { grid-column:2; min-width:0; padding-top:.05rem; }
main.wrap > *:first-child { margin-top:0; }
main.wrap h1, main.wrap h2, main.wrap h3 { font-family:var(--serif); font-weight:400; line-height:1.1; letter-spacing:-.025em; }
main.wrap h1 { font-size:clamp(2.4rem, 5vw, 5.3rem); margin:0 0 2rem; }
main.wrap h2 { font-size:clamp(1.8rem, 3vw, 3.25rem); margin:0 0 1.4rem; }
main.wrap h3 { font-size:1.35rem; margin:2rem 0 .6rem; }
main.wrap p, main.wrap ul, main.wrap ol { max-width:43rem; margin:0 0 1.35rem; }
main.wrap p { font-size:clamp(1.05rem, 1.35vw, 1.25rem); }
main.wrap ul, main.wrap ol { padding-left:1.25rem; }
main.wrap li { margin:.35rem 0; }

/* Gutenberg image blocks stay easy to edit while becoming a gallery on this page. */
.painting-archive { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:clamp(2.5rem, 5vw, 5rem) clamp(1.25rem, 3vw, 3.5rem); align-items:start; }
.painting-archive figure.wp-block-image { margin:0; }
.painting-archive figure.wp-block-image img { width:100%; max-height:min(68vh, 48rem); object-fit:contain; object-position:left top; background:#eceae4; }
.painting-archive figcaption, .wp-element-caption { margin-top:.7rem; font-family:var(--serif); font-size:.94rem; font-style:italic; line-height:1.4; color:var(--muted); }

article { padding-bottom:3rem; margin-bottom:3rem; border-bottom:1px solid var(--line); }
article.article-loop header { margin-bottom:1.25rem; }
article.article-loop h2 { margin-bottom:.5rem; }
article.article-loop h2 a { text-decoration:none; }
.the-author, article header p, .comment-meta, .comment-meta a { font-family:var(--serif); font-size:.94rem !important; font-style:italic; color:var(--muted); }
.entry-content > * { max-width:43rem; }
.entry-content figure, .entry-content img { max-width:100%; }
.nav-links { display:flex; justify-content:space-between; gap:1rem; margin:0 0 2.5rem; font-family:var(--serif); }
.nav-next { margin-left:auto; text-align:right; }

#comments { max-width:43rem; margin-top:3rem; }
#comments ol { padding-left:1.25rem; }
#comments li { margin:1.5rem 0; }
label { display:block; margin-top:1rem; }
input, textarea { width:min(100%, 34rem); margin-top:.35rem; padding:.7rem; border:1px solid var(--line); background:#fff; font:inherit; }
input[type="submit"] { width:auto; cursor:pointer; }

footer { grid-column:1; align-self:end; margin-top:clamp(4rem, 12vh, 10rem); color:var(--muted); }
#socialMedia { display:flex; gap:.65rem; margin:0 0 1rem; padding:0; list-style:none; }
#socialMedia a { display:block; opacity:.72; transition:opacity .18s ease; }
#socialMedia a:hover, #socialMedia a:focus-visible { opacity:1; }
footer p { margin:0; font-family:var(--serif); font-size:.82rem; }
body.home { background:#c7c1b4; }
body.home #wrapper { min-height:100vh; min-height:100dvh; grid-template-rows:1fr auto; position:relative; }
body.home main.wrap { min-height:40vh; }
body.home footer { align-self:end; }
.landing-atmosphere { position:fixed; top:0; left:50%; z-index:0; display:block; width:100vw; height:100vh; height:100dvh; transform:translateX(-50%); background-position:50% 46%; background-size:125% auto; background-repeat:no-repeat; }
.landing-atmosphere::after { position:absolute; inset:0; content:""; background:rgba(248, 247, 243, .18); }
body.home #site-heading, body.home footer { position:relative; z-index:1; }
.screen-reader-text { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0, 0, 0, 0); white-space:nowrap; border:0; }

@media (max-width:760px) {
	#wrapper { display:block; padding:1.5rem; }
	#sidebar { margin:2rem 0 3.5rem; }
	#sidebar nav::before { margin-bottom:.55rem; }
	#menu { display:flex; flex-wrap:wrap; gap:.65rem 1.25rem; padding-top:.75rem; }
	#menu li { margin:0; padding-left:0; }
	#menu li::before { display:none; }
	#menu a { font-size:1.12rem; }
	main.wrap { padding:0; }
	.painting-archive { grid-template-columns:1fr; gap:3rem; }
	.painting-archive figure.wp-block-image img { max-height:none; }
	body.home .landing-atmosphere { background-size:auto 150%; }
	footer { margin-top:5rem; }
}