/* Shared modern layer for every page: canvas grain, glass navigation, labels, buttons, marquee.
   Linked after each page's own styles, so the paintings stay per page and only the frame is shared. */
:root{
  --glass:rgba(255,255,255,.06);  --glass-line:rgba(255,255,255,.14); --glass-hi:rgba(255,255,255,.12);
  --gold:#E4B957; --ember:#E8662F;
  /* the fill for pills, buttons and badges: the page colour at 78% with the glass tint on top, so nothing behind them shows through and no blur is needed */
  --glass-fill:linear-gradient(var(--glass),var(--glass)),color-mix(in srgb,var(--bg) 78%,transparent);
  --ease:cubic-bezier(.2,.7,.2,1);
  /* one scale for spacing, text and rhythm; the pages use these instead of loose numbers */
  --s-1:.25rem; --s-2:.5rem; --s-3:.75rem; --s-4:1rem; --s-6:1.5rem; --s-8:2rem; --s-12:3rem; --s-16:4rem; --s-24:6rem;
  --fs-xs:.75rem; --fs-sm:.875rem; --fs-md:.95rem; --fs-base:1.0625rem; --fs-lg:1.15rem; --fs-sign:1.5rem;
  --lh-head:1.1; --track-label:.16em; --tap:2.75rem;
  --page-top:6.5rem; --page-bottom:clamp(4rem,8vw,6rem); --gap-section:clamp(5rem,12vw,10rem);
}
@media (max-width:760px){:root{--page-top:6rem}}
::selection{background:var(--gold);color:#1B1A22}
html{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.25) transparent}
/* keyboard focus: the same ember ring on every page; pills keep their round shape */
:focus-visible{outline:2px solid var(--ember);outline-offset:4px}
.btn:focus-visible,.nav ul a:focus-visible{border-radius:999px}
.burger:focus-visible{border-radius:50%}

/* canvas grain over everything, like paint on linen. A plain faint layer: a blend mode made the browser re-read the page behind it every frame.
   Phones and reduced motion go without it (see the end of this file). */
body::after{content:"";position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* navigation: wordmark with a small sun, links in a glass pill */
.nav{align-items:center}
.nav .mark{display:inline-flex;align-items:center;gap:var(--s-2);min-height:var(--tap)}
.nav .mark::before{content:"";width:.42em;height:.42em;border-radius:50%;flex:none;transform:translateY(.06em);
  background:radial-gradient(circle at 35% 30%,#FFD9A0 0%,var(--ember) 55%,#C2451C 100%);box-shadow:0 0 14px rgba(232,102,47,.55)}
.nav ul{gap:.15rem;padding:.3rem;border:1px solid var(--glass-line);border-radius:999px;background:var(--glass-fill);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 10px 30px -12px rgba(0,0,0,.35)}
.nav ul a{display:block;padding:.48rem 1.05rem;border-radius:999px;background:none;font-size:.88rem;font-weight:500;letter-spacing:.01em;
  transition:background-color .3s,color .3s}
.nav ul a:hover,.nav ul a:focus-visible{background:var(--glass-hi)}
.nav ul a[aria-current="page"]{background:var(--fg);color:var(--bg)}
.nav ul a::after{inset:-6px -2px}
.nav.scrolled{box-shadow:0 1px 0 rgba(255,255,255,.07)}

/* small uppercase labels that index each section */
.eyebrow{display:flex;align-items:center;gap:var(--s-4);margin:0 0 clamp(var(--s-6),3vw,var(--s-8));font-family:var(--sans);font-size:var(--fs-xs);font-weight:500;
  letter-spacing:var(--track-label);text-transform:uppercase;color:var(--muted,rgba(255,255,255,.65))}
.eyebrow b{font-weight:500;color:var(--gold)}
.eyebrow.rule::after{content:"";flex:1;height:1px;background:currentColor;opacity:.3}

/* pill buttons with an arrow that slides */
.btn{display:inline-flex;align-items:center;gap:var(--s-3);padding:var(--s-4) var(--s-6);border-radius:999px;border:1px solid var(--glass-line);
  background:var(--glass-fill);font-family:var(--sans);font-size:var(--fs-md);font-weight:500;line-height:1;text-decoration:none;color:inherit;
  transition:background-color .35s,color .35s,border-color .35s,transform .35s var(--ease)}
.btn svg{width:1.05em;height:1.05em;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s var(--ease)}
.btn:hover,.btn:focus-visible{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.btn:hover svg,.btn:focus-visible svg{transform:translateX(4px) rotate(-45deg)}
.btn.solid{background:var(--gold);border-color:var(--gold);color:#1B1A22}
.btn.solid:hover,.btn.solid:focus-visible{background:var(--fg);border-color:var(--fg)}

/* text links in the dark footers: a thin rule under the words, gold on hover and focus */
.mail,.sig a{display:inline-flex;align-items:center;min-height:var(--tap);text-decoration:none}
.mail{text-decoration:underline;text-decoration-color:var(--night-line,var(--line));text-decoration-thickness:1px;text-underline-offset:.3em}
.mail:hover,.mail:focus-visible{text-decoration-color:var(--gold)}
.sig a:hover,.sig a:focus-visible{color:var(--gold)}

/* availability badge with a breathing dot */
.status{display:inline-flex;align-items:center;gap:var(--s-2);padding:var(--s-2) var(--s-4) var(--s-2) var(--s-3);border-radius:999px;border:1px solid var(--glass-line);
  background:var(--glass-fill);font-size:var(--fs-xs);font-weight:500;letter-spacing:.02em}
.status i{position:relative;width:.5rem;height:.5rem;border-radius:50%;background:#8FD19E}
.status i::after{content:"";position:absolute;inset:0;border-radius:50%;background:inherit;animation:ping 2.2s var(--ease) infinite}
@keyframes ping{from{transform:scale(1);opacity:.7}to{transform:scale(3.2);opacity:0}}

/* endless ribbon of words between sections */
.marquee{position:relative;overflow:hidden;padding:clamp(1.4rem,3vw,2.4rem) 0;border-block:1px solid var(--line);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee .track{display:flex;width:max-content;animation:marquee 38s linear infinite}
.marquee:hover .track{animation-play-state:paused}
.marquee span{display:inline-flex;align-items:center;gap:clamp(1.4rem,3.5vw,3rem);padding-right:clamp(1.4rem,3.5vw,3rem);white-space:nowrap;
  font-family:var(--serif);font-size:clamp(2.4rem,6.4vw,5.6rem);line-height:1}
.marquee em{color:transparent;-webkit-text-stroke:1px var(--fg);font-style:italic}
.marquee span::after{content:"";width:.32em;height:.32em;border-radius:50%;flex:none;
  background:radial-gradient(circle at 35% 30%,#FFF3CC 0%,#F3D27A 25%,var(--gold) 60%,#B8892E 100%);box-shadow:0 0 18px rgba(228,185,87,.4)}
@keyframes marquee{to{transform:translateX(-50%)}}

/* glass card, used for lists of services and skills */
.card{position:relative;border:1px solid var(--glass-line);border-radius:22px;background:linear-gradient(160deg,rgba(255,255,255,.08),rgba(255,255,255,.02));
  -webkit-backdrop-filter:blur(14px) saturate(130%);backdrop-filter:blur(14px) saturate(130%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 24px 50px -30px rgba(0,0,0,.5);
  transition:transform .5s var(--ease),border-color .4s,background-color .4s}
.card:hover{transform:translateY(-4px);border-color:rgba(228,185,87,.45)}

/* phone menu button: two lines that turn into a cross */
.burger{display:none}
@media (max-width:760px){
  .nav{flex-wrap:nowrap;padding-bottom:1.4rem;background:linear-gradient(to bottom,color-mix(in srgb,var(--bg) 80%,transparent) 30%,transparent)}
  .nav .mark,.burger{position:relative;z-index:2}
  .burger{display:inline-flex;flex-direction:column;justify-content:center;align-items:center;gap:6px;width:2.9rem;height:2.9rem;padding:0;
    border:1px solid var(--glass-line);border-radius:50%;background:var(--glass-fill);color:inherit;cursor:pointer}
  .burger span{display:block;width:1.1rem;height:1.5px;border-radius:2px;background:currentColor;transition:transform .4s var(--ease)}
  .nav.open .burger span:first-child{transform:translateY(3.75px) rotate(45deg)}
  .nav.open .burger span:last-child{transform:translateY(-3.75px) rotate(-45deg)}
  /* the sheet: big serif links, one per line */
  .nav ul{position:fixed;inset:0;z-index:1;flex-direction:column;justify-content:center;gap:.2rem;width:auto;margin:0;
    padding:6rem var(--pad) 4rem;border:0;border-radius:0;box-shadow:none;background:var(--bg);background:color-mix(in srgb,var(--bg) 94%,transparent);
    -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:0;visibility:hidden;transition:opacity .4s,visibility 0s .4s}
  .nav.open ul{opacity:1;visibility:visible;transition:opacity .4s}
  .nav ul li{border-bottom:1px solid var(--glass-line);transform:translateY(12px);opacity:0;transition:transform .5s var(--ease),opacity .5s}
  .nav.open ul li{transform:none;opacity:1}
  .nav.open ul li:nth-child(2){transition-delay:.05s}
  .nav.open ul li:nth-child(3){transition-delay:.1s}
  .nav.open ul li:nth-child(4){transition-delay:.15s}
  .nav ul a{display:flex;justify-content:space-between;align-items:center;padding:.9rem 0;border-radius:0;font-family:var(--serif);font-weight:400;font-size:clamp(2.4rem,11vw,3.4rem);line-height:1.05;letter-spacing:0}
  .nav ul a::after{content:"\2192";position:static;inset:auto;font-family:var(--sans);font-size:1.2rem;opacity:.5}
  .nav ul a:hover{background:none}
  .nav ul a[aria-current="page"]{background:none;color:var(--gold)}
  /* a blurred header would trap the fixed sheet inside it, so phones get a solid one */
  .nav.scrolled{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--bg)}
  .menu-open,.menu-open body{overflow:hidden}
  .btn{padding:var(--s-3) var(--s-6);min-height:var(--tap)}
  /* on phones only the header and the menu sheet blur, the glass cards keep their translucent fill without it */
  .card{-webkit-backdrop-filter:none;backdrop-filter:none}
  .nav ul a:focus-visible{border-radius:0;outline-offset:-4px;background:none}
}
/* performance: baked paintings fill their box like the SVG did; off-screen animations wait */
.baked img{position:absolute;inset:0;display:block;width:100%;height:100%}
.is-off,.is-off *,.is-off *::before,.is-off *::after,
.tab-hidden *,.tab-hidden *::before,.tab-hidden *::after{animation-play-state:paused!important}
.marquee .track{will-change:transform}

/* no grain on phones or with reduced motion */
@media (max-width:760px),(prefers-reduced-motion:reduce){body::after{display:none}}

@media (prefers-reduced-motion:reduce){
  .marquee .track,.status i::after{animation:none}
  .card,.btn,.btn svg{transition:none}
}