/* davemaric.co.uk – shared styles */
:root{
  --bg:#f4f0e6; --ink:#1d1c1a; --muted:#6e695f; --faint:#a29c90;
  --peach:#f2e2d3; --peach-deep:#ead2bd; --grey:#ebe8e1; --rule:rgba(29,28,26,.14);
  --display:"Jost",system-ui,sans-serif; --text:"Instrument Sans",system-ui,sans-serif;
  /* type scale – change --type to resize every page at once (1 = current) */
  --type:1;
  --fs-title:clamp(calc(32px * var(--type)), calc(4.2vw * var(--type)), calc(54px * var(--type)));
  --fs-name:calc(19px * var(--type));    /* DAVE MARIC */
  --fs-nav:calc(17px * var(--type));     /* MUSIC / IMAGES / LAND */
  --fs-heading:calc(19px * var(--type)); /* work titles, sub-headings */
  --fs-body:calc(18px * var(--type));    /* running text */
  --fs-lead:calc(17px * var(--type));    /* quotes, larger asides */
  --fs-text:calc(15px * var(--type));    /* list text, details */
  --fs-small:calc(14px * var(--type));   /* filters, captions */
  --fs-tiny:calc(13px * var(--type));    /* small buttons, durations */
  --fs-label:calc(11px * var(--type));   /* uppercase labels */
  --wrap:1280px; --gutter:clamp(20px,6vw,96px);
  --menu-bg:#fff;
  color-scheme:light;
}
/* dark mode – follows the device setting; the corner button overrides it (remembered per visitor) */
:root[data-theme="dark"]{
  --bg:#1c1b19; --ink:#ebe6dc; --muted:#a8a296; --faint:#6f6a61;
  --peach:#2b2620; --peach-deep:#3a3229; --grey:#262421; --rule:rgba(235,230,220,.16); --menu-bg:#242220;
  color-scheme:dark;
}
body{transition:background-color .3s,color .3s}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 var(--fs-body)/1.6 var(--text);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--muted)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}

/* header */
.site-head{display:flex;justify-content:space-between;align-items:center;padding:30px 0}
.site-name{font:400 var(--fs-name)/1 var(--text);letter-spacing:.02em;text-decoration:none;text-transform:uppercase}
.nav{display:flex;gap:30px;list-style:none;margin:0;padding:0}
.nav>li{position:relative}
.nav>li>button{all:unset;cursor:pointer;font:400 var(--fs-nav)/1 var(--text);text-transform:uppercase;letter-spacing:.02em;display:flex;align-items:center;gap:6px}
.nav>li>button::after{content:"";width:6px;height:6px;border:solid currentColor;border-width:0 1.3px 1.3px 0;transform:translateY(-2px) rotate(45deg)}
.nav>li>button::after{transition:transform .2s}
.nav li:hover>button,.nav li.open>button,.nav li:has(:focus-visible)>button{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.nav li:hover>button::after,.nav li.open>button::after,.nav li:has(:focus-visible)>button::after{transform:translateY(1px) rotate(-135deg)}
.nav ul{list-style:none;margin:0;padding:10px 0;position:absolute;left:-1px;top:calc(100% + 6px);min-width:200px;background:var(--menu-bg);border:1px solid var(--rule);opacity:0;visibility:hidden;transform:translateY(-4px);transition:.18s;z-index:20}
.nav ul::before{content:"";position:absolute;left:0;right:0;top:-8px;height:8px}
.nav li:hover>ul,.nav li:has(:focus-visible)>ul,.nav li.open>ul{opacity:1;visibility:visible;transform:none}
.nav ul a{display:block;padding:9px 18px;text-decoration:none;font-size:var(--fs-text);text-transform:lowercase}
.nav ul a[aria-current]{text-decoration:underline}

/* page title */
.page-title{font:300 var(--fs-title)/1.1 var(--display);overflow-wrap:anywhere;margin:clamp(70px,11vw,170px) 0 clamp(40px,6vw,80px) 14%;letter-spacing:-.005em}

.site-foot{padding:90px 0 50px;display:flex;gap:40px;justify-content:center;font-size:var(--fs-text)}

/* mobile menu */
.menu-toggle{all:unset;display:none;cursor:pointer;width:30px;height:22px;position:relative;z-index:60}
.menu-toggle span{position:absolute;left:0;right:0;height:1.5px;background:var(--ink);transition:transform .25s,opacity .2s}
.menu-toggle span:nth-child(1){top:2px}.menu-toggle span:nth-child(2){top:10px}.menu-toggle span:nth-child(3){top:18px}
body.nav-open .menu-toggle span:nth-child(1){transform:translateY(8px) rotate(45deg)}
body.nav-open .menu-toggle span:nth-child(2){opacity:0}
body.nav-open .menu-toggle span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

@media (max-width:760px){
  body{font-size:var(--fs-lead)}
  body.nav-open{overflow:hidden}
  .site-name{position:relative;z-index:60}
  .menu-toggle{display:block}
  .site-nav{position:fixed;inset:0;z-index:50;background:var(--bg);padding:110px var(--gutter) 40px;overflow-y:auto;opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s}
  body.nav-open .site-nav{opacity:1;visibility:visible}
  body:not(.nav-open) .site-nav{pointer-events:none}
  .nav{flex-direction:column;gap:34px}
  .nav>li>button{font:300 calc(30px * var(--type))/1 var(--display);letter-spacing:.04em;pointer-events:none}
  .nav>li>button::after{display:none}
  .nav ul{position:static;opacity:1;visibility:inherit;transform:none;border:0;background:none;padding:12px 0 0;min-width:0}
  .nav ul a{text-transform:none}
  .nav>li>button{text-decoration:none!important}
  .nav ul a{padding:7px 0;font-size:var(--fs-heading)}
  .page-title{margin-left:0;font-size:clamp(32px,9.5vw,44px)}
}

/* film strip */
.strip{display:grid;grid-template-columns:repeat(var(--cols,5),1fr);background:#000;padding:clamp(10px,2.2vw,26px) 0;width:72%;margin:0 auto clamp(50px,6vw,80px)}
.strip-cell{position:relative;aspect-ratio:4/3;overflow:hidden;background:#000}
.strip-cell img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition-property:opacity;transition-timing-function:ease-in-out}
.strip-cell img.on{opacity:1}
/* .contain: square frames, each image shown whole – landscape ones letterboxed in black, square ones fill the frame */
.strip.contain{padding:0}
.strip.contain .strip-cell{aspect-ratio:1/1}
.strip.contain .strip-cell img{object-fit:contain}
/* .sepia: the monochrome sepia tone of the WordPress home strip */
.strip.sepia .strip-cell img{filter:grayscale(1) sepia(.38) contrast(.92) brightness(1.03)}
/* phone grid (data-mobile="3x3") */
.strip.is-grid{padding:0}
@media (max-width:760px){.strip{width:100%}}

/* page-load animation: a small spinning square on the page colour, fades out once loaded */
.preloader{position:fixed;inset:0;z-index:200;background:var(--bg);display:grid;place-items:center;transition:opacity .6s ease,visibility .6s;animation:pl-failsafe 0s 5s forwards}
.preloader span{width:22px;height:22px;background:var(--ink);animation:pl-spin 1.2s cubic-bezier(.6,0,.4,1) infinite}
body.loaded .preloader{opacity:0;visibility:hidden}
@keyframes pl-spin{0%{transform:rotate(0) scale(1)}50%{transform:rotate(180deg) scale(.6)}100%{transform:rotate(360deg) scale(1)}}
@keyframes pl-failsafe{to{opacity:0;visibility:hidden}}
@media (prefers-reduced-motion:reduce){.preloader span{animation:none}}

/* light/dark switch – small fixed button, lower right */
.theme-toggle{all:unset;box-sizing:border-box;cursor:pointer;position:fixed;right:max(18px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));z-index:40;width:38px;height:38px;border-radius:50%;border:1px solid var(--rule);background:var(--bg);display:grid;place-items:center;opacity:.75;transition:opacity .2s,background-color .3s,border-color .3s}
.theme-toggle:hover,.theme-toggle:focus-visible{opacity:1;border-color:var(--ink)}
.theme-toggle::before{content:"";width:14px;height:14px;border-radius:50%;border:1.3px solid var(--ink);background:linear-gradient(90deg,var(--ink) 50%,transparent 50%)}
:root[data-theme="dark"] .theme-toggle::before{background:linear-gradient(90deg,transparent 50%,var(--ink) 50%)}
body.nav-open .theme-toggle{display:none}
@media print{.theme-toggle{display:none}}