/* pure black and white for text, no accent colour there — after the ELEGANCE reference */
:root{ --pop:#000000; --ink-dark:#000000;
  /* a pastel palette for decorative line/frame accents only (never body text) — after the isometric-icon reference */
  --pastel-sage:#b9ccab; --pastel-blue:#a9c6db; --pastel-peach:#eec49a; --pastel-rose:#e2a79b;
  --pastel-mustard:#e3cd7f; --pastel-tan:#c9ac83; --pastel-mint:#9fcdbd; --pastel-periwinkle:#aab4d4;
}

::selection{ background:var(--pop); color:#fff; }

/* header: name, tagline and every menu word in near-black */
.nav-name{ color:var(--ink-dark); font-weight:600; font-size:19px; letter-spacing:0.01em; }
.nav-tagline{ color:#1f1f1f; font-weight:500; }
.nav-links a.mono{ color:var(--ink-dark); font-weight:500; }
.nav-links a.mono:hover, .nav-links a.mono[aria-current="page"]{ color:var(--pop); font-weight:600; }
.back{ color:#1f1f1f; font-weight:500; }
.back:hover{ color:var(--pop); }

/* home: light frosted header with dark text, matching the dark type on the photo */
.hero-header{ background:rgba(255,255,255,0.5); backdrop-filter:blur(8px); }
.hero-header .nav-name, .hero-header .nav-links a.mono{ color:var(--ink-dark); text-shadow:none; }
.hero-header .nav-name{ font-weight:600; font-size:19px; } .hero-header .nav-links a.mono{ font-weight:500; }
.hero-header .nav-tagline{ color:#1f1f1f; font-weight:500; }
.hero-header .nav-links a.mono:hover, .hero-header .nav-links a.mono[aria-current="page"]{ color:var(--pop); font-weight:600; }

/* page labels and small meta lines */
.section-label, .corner-label, .about .label, .cv-label{ color:var(--pop); font-weight:600; }
footer .section-label{ color:var(--pop); }
.meta, .cap b{ color:var(--pop); font-weight:600; }
.footer-bottom{ color:#1f1f1f; }

/* works: category under each title, filters */
.filter{ color:var(--ink-dark); font-weight:600; }
.row .sub, #work .sub{ color:var(--pop); font-weight:600; }
.row:hover .title{ color:var(--pop); }
.filter.active{ color:var(--pop); font-weight:600; border-bottom-color:var(--pop); }
.filter:hover{ color:var(--pop); }

/* links */
footer a:hover{ color:var(--pop); }

/* no grain: clean flat surface, like the reference */
body::before, body::after{ content:none !important; }

/* a thin hairline divider with a small circular mark, before the footer */
.section-divider{ position:relative; z-index:2; max-width:1080px; margin:0 auto; padding:54px 40px 0; display:flex; align-items:center; }
.section-divider::before, .section-divider::after{ content:""; flex:1 1 auto; height:1px; background:rgba(0,0,0,0.14); }
.section-divider .mark{ flex:0 0 auto; width:22px; height:22px; margin:0 14px; border:1.5px solid var(--pastel-rose); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:11px; font-style:normal; line-height:1; color:var(--ink-dark); }
@media (max-width:760px){ .section-divider{ padding:40px 24px 0; } }

/* colourful thin frames on photos, cycling through the pastel palette — the one nod to the isometric-icon reference,
   without touching the photos themselves */
#work .row:nth-child(8n+1) .thumb, #objects .row:nth-child(3n+1) .thumb{ outline:2px solid var(--pastel-sage); outline-offset:-2px; }
#work .row:nth-child(8n+2) .thumb, #objects .row:nth-child(3n+2) .thumb{ outline:2px solid var(--pastel-peach); outline-offset:-2px; }
#work .row:nth-child(8n+3) .thumb, #objects .row:nth-child(3n+3) .thumb{ outline:2px solid var(--pastel-blue); outline-offset:-2px; }
#work .row:nth-child(8n+4) .thumb{ outline:2px solid var(--pastel-mustard); outline-offset:-2px; }
#work .row:nth-child(8n+5) .thumb{ outline:2px solid var(--pastel-rose); outline-offset:-2px; }
#work .row:nth-child(8n+6) .thumb{ outline:2px solid var(--pastel-mint); outline-offset:-2px; }
#work .row:nth-child(8n+7) .thumb{ outline:2px solid var(--pastel-tan); outline-offset:-2px; }
#work .row:nth-child(8n+8) .thumb{ outline:2px solid var(--pastel-periwinkle); outline-offset:-2px; }

/* objects: the small index badge picks up the same colour as its card's frame */
#objects .row:nth-child(3n+1) .idx-badge{ border-color:var(--pastel-sage); background:rgba(185,204,171,0.18); }
#objects .row:nth-child(3n+2) .idx-badge{ border-color:var(--pastel-peach); background:rgba(238,196,154,0.18); }
#objects .row:nth-child(3n+3) .idx-badge{ border-color:var(--pastel-blue); background:rgba(169,198,219,0.18); }



/* "A Sense of Home" stays neutral: no accent colour on its tile or page */
.row.no-pop .sub, #work .row.no-pop .sub{ color:#6e6e6e; font-weight:500; }
.row.no-pop:hover .title{ color:inherit; }
.no-pop .meta, .no-pop .cap b{ color:#6e6e6e; font-weight:500; }

/* micro-type: tiny, wide-tracked uppercase for labels and nav, after the reference */
.nav-links a.mono{ text-transform:uppercase; letter-spacing:0.1em; font-size:9.5px; }
.filter{ text-transform:uppercase; letter-spacing:0.06em; }
.section-label, .corner-label, .meta, .cap, .cv-label{ text-transform:uppercase; letter-spacing:0.09em; }
.row .sub, #work .sub{ text-transform:uppercase; letter-spacing:0.07em; font-size:9px; }