/* Shared styles for the inner pages (About, Process, Hire Me, FAQ) */
:root{--ground:#F3F3F1;--ink:#0B0B0B;--muted:#3A3A3A;--soft:#555;--accent:#FF5A36;--card:#FFFFFF;--display:'Inter','Helvetica Neue',Helvetica,Arial,sans-serif;--text:'Roboto','Helvetica Neue',Helvetica,Arial,sans-serif;--pad:clamp(16px,2vw,24px)}
/* The site is intentionally light; dark mode keeps the same palette. */
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--ground:#F3F3F1;--ink:#0B0B0B}}
:root[data-theme="dark"]{--ground:#F3F3F1;--ink:#0B0B0B}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
[id]{scroll-margin-top:16px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
html,body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--text);-webkit-font-smoothing:antialiased}
a{color:var(--ink)}
img{max-width:100%}
@media (hover:hover) and (pointer:fine){html,body,body *{cursor:none !important}}

/* Header */
.hd{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 24px;padding:14px var(--pad)}
.logo{display:inline-flex;line-height:0;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.logo img{height:28px;width:auto;margin:-3px 0;display:block}
.logo:hover{transform:rotate(-3deg)}
.hd .tag{margin:0;flex:1 1 auto;font-family:var(--display);font-size:15px;font-weight:400;letter-spacing:-.01em;color:var(--muted)}
.hd nav{display:flex;flex-wrap:wrap;gap:24px;font-size:15px}
.hd nav a{text-decoration:none}
.hd nav a[aria-current="page"]{font-weight:500}
.lnk{position:relative}
.lnk::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.lnk:hover::after,.lnk[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}

/* Page intro */
.intro{padding:clamp(48px,7vw,110px) var(--pad) clamp(32px,4vw,56px);display:flex;flex-direction:column;gap:20px;border-bottom:1px solid var(--ink)}
.eyebrow{font-size:14px;color:var(--soft)}
.intro h1{margin:0;font-family:var(--display);font-weight:500;font-size:clamp(44px,7vw,112px);line-height:.95;letter-spacing:-.045em}
.intro p{margin:0;max-width:52ch;font-size:clamp(16px,1.3vw,19px);line-height:1.55;color:var(--muted)}
.wrap{padding:clamp(40px,6vw,96px) var(--pad)}
.h2{margin:0 0 16px;font-family:var(--display);font-size:15px;font-weight:500;letter-spacing:-.01em}
.body{font-size:15px;line-height:1.6;color:var(--muted);max-width:60ch}
.body p{margin:0 0 16px}

/* Section titles: one size on every page */
.sec-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:12px 40px;padding-top:16px;border-top:1px solid var(--ink);margin-bottom:clamp(28px,3.5vw,48px)}
.sec-head h2{margin:0;font-family:var(--display);font-size:clamp(32px,3.4vw,52px);font-weight:500;line-height:1;letter-spacing:-.035em}
.sec-head p{margin:0;max-width:46ch;font-size:15px;line-height:1.5;color:var(--soft)}

/* Buttons */
.pill{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 24px;border:1px solid var(--ink);border-radius:999px;font:inherit;font-size:15px;text-decoration:none;color:var(--ink);background:transparent;transition:background .25s,color .25s,transform .25s}
.pill:hover{background:var(--ink);color:var(--ground);transform:translateY(-2px)}
.pill-main{background:var(--ink);color:var(--ground)}
.pill-main:hover{background:var(--accent);border-color:var(--accent);color:var(--ink)}
.pill:focus-visible,.lnk:focus-visible,.logo:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.btns{display:flex;flex-wrap:wrap;gap:12px}

/* Scroll fade-in */
.fx{opacity:0;transform:translateY(40px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform 1.1s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0ms)}
.fx.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.fx{opacity:1;transform:none;transition:none}}
/* Phones: the menu bar is just the logo (the burger is added by menu.js). Set here, before the page shows,
   so the bar does not start tall and then shrink, which made the page jump up */
@media (max-width:700px){
  header.bar{flex-wrap:nowrap !important;padding-top:16px !important;padding-bottom:16px !important;min-height:60px}
  header.bar > nav{display:none !important} /* the burger menu has the same links */
  header.bar > .tag,header.bar > h1{position:absolute !important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
/* Phones, on arrival at Work / Personal Artworks: the logo appears first, then the menu button, then the first tile */
@keyframes introIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (max-width:700px){
  html.arrive header.bar .logo{animation:introIn .6s cubic-bezier(.2,.7,.2,1) .05s both}
  html.arrive header.bar .mm-btn{animation:introIn .6s cubic-bezier(.2,.7,.2,1) .35s both}
  html.arrive .cats .cat{--d:650ms !important}
  /* the tiles fade in where they are, so no empty gap shows under the menu bar while they wait */
  html.arrive .cats .cat.fx{transform:none !important}
}
@media (prefers-reduced-motion:reduce){html.arrive header.bar .logo,html.arrive header.bar .mm-btn{animation:none}}

/* Footer */
.ft{position:relative;color:#F3F3F1;background:#0B0B0B url("footer-bg.jpg") center 60%/cover no-repeat}
.ft::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.65)}
.ft-in{position:relative;display:flex;flex-direction:column;gap:clamp(48px,6vw,96px);padding:clamp(72px,9vw,140px) var(--pad) 28px;text-shadow:0 1px 12px rgba(0,0,0,.35)}
.ft a{color:#F3F3F1}
.ft-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:32px}
.ft-big{margin:0;font-family:var(--display);font-weight:500;font-size:clamp(32px,4.4vw,68px);line-height:1.04;letter-spacing:-.04em}
.ft-mail{color:var(--accent) !important;text-decoration:none;transition:opacity .25s}
.ft-mail:hover{opacity:.75}
.pill-light{border-color:#F3F3F1;color:#F3F3F1 !important}
.pill-light:hover{background:#F3F3F1;color:#0B0B0B !important}
.ft-cols{display:grid;grid-template-columns:repeat(3,minmax(0,220px));gap:32px}
@media (max-width:600px){.ft-cols{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ft-cols div{display:flex;flex-direction:column;align-items:flex-start;gap:10px;font-size:15px}
.ft-cols h3{margin:0 0 6px;font-family:var(--display);font-size:13px;font-weight:500;letter-spacing:.02em;color:rgba(243,243,241,.6)}
.ft-cols a{text-decoration:none}
.ft-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;padding-top:20px;border-top:1px solid rgba(243,243,241,.25);font-size:13px;color:rgba(243,243,241,.7)}
.ft-bottom a{text-decoration:none}
.ft-logo{height:28px;width:auto;display:block}

/* Glass cursor */
.cur{position:fixed;left:0;top:0;z-index:100;width:26px;height:26px;border-radius:50%;pointer-events:none;opacity:0;-webkit-backdrop-filter:blur(10px) saturate(170%);backdrop-filter:blur(10px) saturate(170%);box-shadow:inset 0 1px 1px rgba(255,255,255,.55),inset 0 -8px 16px rgba(255,255,255,.08),0 10px 30px rgba(0,0,0,.18);border:1px solid rgba(255,255,255,.7);background-color:rgba(255,90,54,.45);transition:background-color .35s,opacity .2s}
@media (hover:none),(pointer:coarse){.cur{display:none}}

/* Menu bar: stays at the top, hides while scrolling down, comes back when scrolling up */
.bar{position:sticky;top:0;z-index:40;background:rgba(243,243,241,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .3s}
.bar.away{transform:translateY(-100%)}
.bar.lifted{box-shadow:0 1px 0 rgba(11,11,11,.12)}
.nav-cta{background:#0B0B0B;color:#F3F3F1 !important;padding:8px 18px;border-radius:999px;transition:background .25s,color .25s}
.nav-cta::after{display:none}
.nav-cta:hover{background:#FF5A36;color:#0B0B0B !important}

/* Menu alignment: links sit on the Contact button's centre line, underline close to the text */
header nav{display:flex;align-items:center}
header nav .lnk{line-height:1.2}
header nav .lnk::after{bottom:-2px}

/* Footer: Hire Me sits right under the email, as a solid button */
.ft-top{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:28px}
.ft-big{overflow-wrap:anywhere}
.pill-light{background:#F3F3F1 !important;border-color:#F3F3F1 !important;color:#0B0B0B !important;min-height:52px;padding:0 30px;font-size:16px;font-weight:500}
.pill-light:hover{background:#FF5A36 !important;border-color:#FF5A36 !important;color:#0B0B0B !important}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Social links with icons */
.soc{display:inline-flex;align-items:center;gap:10px}
.si{flex:0 0 auto;width:17px;height:17px;background:currentColor;-webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat;transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.soc:hover .si{transform:scale(1.15)}