:root {
  --paper: #f6f1e8;
  --cream: #eee5d7;
  --sand: #d9c8b3;
  --taupe: #9c8772;
  --ink: #28251f;
  --muted: #746b60;
  --line: rgba(40,37,31,.18);
  --serif: "Playfair Display", Georgia, serif;
  --sans: "DM Sans", Arial, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); line-height: 1.65; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.site-header { display:flex; justify-content:space-between; align-items:center; padding: 25px 6.5vw; border-bottom:1px solid var(--line); gap: 25px; }
.wordmark { font-size:.78rem; font-weight:700; letter-spacing:.13em; line-height:1.4; }
.wordmark span { display:block; font-size:.64rem; font-weight:400; letter-spacing:.07em; color:var(--muted); margin-top:5px; }
.main-nav { display:flex; gap:clamp(20px,4vw,54px); font-size:.78rem; }
.main-nav a, .back-top { transition:opacity .2s; }
.main-nav a:hover, .back-top:hover { opacity:.55; }
.menu-toggle { display:none; border:0; background:transparent; }
.section-wrap { padding: 100px 9vw; }
.hero { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:8vw; min-height:610px; }
.eyebrow { font-size:.65rem; letter-spacing:.18em; font-weight:700; color:var(--taupe); margin:0 0 22px; }
h1,h2 { font-family:var(--serif); font-weight:400; line-height:1.08; letter-spacing:-.035em; margin:0; }
h1 { font-size:clamp(3.3rem,6vw,6.1rem); max-width:650px; }
h1 em,h2 em { font-weight:400; color:#907a62; }
.intro { max-width:430px; color:var(--muted); margin:28px 0 32px; font-size:.98rem; }
.text-link { display:inline-flex; gap:25px; align-items:center; padding-bottom:8px; border-bottom:1px solid var(--ink); font-size:.8rem; }
.text-link span { font-size:1.1rem; }
.hero-art { position:relative; height:440px; background:#e6d8c5; overflow:hidden; }
.hero-art:before { content:""; position:absolute; inset:25px; border:1px solid rgba(40,37,31,.22); }
.art-note { position:absolute; z-index:2; top:16%; left:13%; font-family:var(--serif); font-size:clamp(1.5rem,3vw,2.6rem); line-height:1.12; }
.abstract-shape { position:absolute; }
.shape-one { width:58%; height:66%; right:-4%; bottom:-4%; background:#b8a58c; border-radius:52% 48% 0 0; transform:rotate(-12deg); }
.shape-two { width:39%; aspect-ratio:1; right:17%; bottom:13%; background:#78806a; border-radius:50%; }
.shape-three { width:27%; aspect-ratio:1; right:27%; bottom:28%; background:#d9b6a1; border-radius:50%; mix-blend-mode:multiply; }
.art-caption { position:absolute; z-index:2; bottom:20px; left:13%; font-size:.56rem; letter-spacing:.15em; }
.portfolio { background:#fbf8f2; }
.section-heading { display:flex; align-items:end; justify-content:space-between; gap:35px; }
h2 { font-size:clamp(2.5rem,4vw,4.2rem); }
.section-description { max-width:245px; color:var(--muted); font-size:.85rem; margin:0 0 7px; }
.filters { display:flex; flex-wrap:wrap; gap:9px; margin:42px 0 28px; }
.filter { border:1px solid var(--line); background:transparent; color:var(--muted); padding:9px 15px; border-radius:30px; cursor:pointer; font-size:.72rem; }
.filter:hover,.filter.is-active { background:var(--ink); border-color:var(--ink); color:var(--paper); }
.project-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:35px 22px; }
.project-card { border:0; padding:0; background:none; text-align:left; color:inherit; cursor:pointer; min-width:0; }
.project-image { display:flex; position:relative; align-items:center; justify-content:center; aspect-ratio:4/4.5; overflow:hidden; background:var(--cream); }
.project-image img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s; }
.project-card:hover .project-image img { transform:scale(1.035); }
.placeholder-art { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; flex-direction:column; text-align:center; padding:20px; }
.placeholder-art strong { font-family:var(--serif); font-weight:400; font-size:clamp(1.3rem,2.3vw,2.3rem); line-height:1.12; max-width:90%; }
.placeholder-art small { margin-top:15px; font-size:.56rem; letter-spacing:.16em; }
.project-card:nth-child(3n+1) .project-image { background:#e5d7c4; }
.project-card:nth-child(3n+1) .placeholder-art { background:radial-gradient(ellipse at 75% 80%,#b6a187 0 20%,transparent 21%),#e5d7c4; }
.project-card:nth-child(3n+2) .project-image { background:#d7d9c9; }
.project-card:nth-child(3n+2) .placeholder-art { background:radial-gradient(circle at 20% 25%,#a5aa91 0 18%,transparent 19%),#d7d9c9; }
.project-card:nth-child(3n) .project-image { background:#e8d4c8; }
.project-card:nth-child(3n) .placeholder-art { background:radial-gradient(ellipse at 70% 25%,#c8a18d 0 20%,transparent 21%),#e8d4c8; }
.project-meta { display:flex; justify-content:space-between; gap:12px; padding-top:14px; }
.project-meta h3 { font-family:var(--serif); font-size:1.18rem; font-weight:400; margin:0; }
.project-meta p { margin:4px 0 0; color:var(--muted); font-size:.69rem; }
.project-arrow { font-size:1.2rem; padding-top:3px; }
.edit-note { color:var(--muted); font-size:.72rem; margin:45px 0 0; }
.edit-note span { color:#8b755d; padding-right:7px; }
.about { display:grid; grid-template-columns:.85fr 1.15fr; align-items:center; gap:10vw; }
.about-mark { position:relative; min-height:380px; background:#e6d8c5; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.about-mark span { z-index:1; font-family:var(--serif); font-size:clamp(5rem,12vw,10rem); letter-spacing:-.1em; color:#f6f1e8; }
.about-mark i,.about-mark b { position:absolute; width:210px; height:210px; border:1px solid #9b8b72; border-radius:50%; }
.about-mark i { transform:translate(-25px,-40px); }
.about-mark b { transform:translate(35px,35px); }
.about-copy h2 { margin-bottom:25px; }
.about-copy > p:not(.eyebrow) { max-width:620px; color:var(--muted); font-size:.9rem; }
.skills { display:flex; flex-wrap:wrap; gap:9px; margin-top:27px; }
.skills span { border-bottom:1px solid var(--sand); padding:7px 12px 7px 0; margin-right:8px; font-size:.7rem; }
.contact { background:#e9dfd1; display:grid; grid-template-columns:1fr 1fr; gap:9vw; align-items:center; }
.contact h2 { margin-bottom:22px; }
.contact > div:first-child > p:last-child { max-width:330px; color:var(--muted); font-size:.88rem; }
.contact-card { padding:30px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.contact-label { display:block; font-size:.6rem; letter-spacing:.16em; color:var(--muted); margin-bottom:18px; }
.email-link { font-family:var(--serif); font-size:clamp(1.15rem,2.2vw,2rem); display:flex; justify-content:space-between; gap:15px; border-bottom:1px solid var(--line); padding-bottom:15px; }
.email-link span { font-family:var(--sans); font-size:1rem; }
.contact-card p { font-size:.75rem; color:var(--muted); margin-bottom:0; }
.site-footer { display:flex; justify-content:space-between; align-items:center; gap:25px; padding:27px 6.5vw; }
.site-footer > p { color:var(--muted); font-size:.68rem; text-align:center; }
.site-footer > p span { display:block; }
.back-top { font-size:.72rem; }
.project-dialog { border:0; padding:0; width:min(760px,calc(100% - 30px)); max-height:90vh; background:var(--paper); color:var(--ink); }
.project-dialog::backdrop { background:rgba(32,29,24,.65); }
.dialog-close { position:sticky; top:0; float:right; border:0; background:var(--paper); font-size:2rem; width:48px; height:48px; cursor:pointer; z-index:2; }
.dialog-body { padding:0 35px 38px; }
.dialog-body .dialog-image { width:100%; min-height:260px; display:flex; align-items:center; justify-content:center; background:var(--cream); padding:45px; text-align:center; font-family:var(--serif); font-size:2.5rem; }
.dialog-body h2 { font-size:2.6rem; margin:25px 0 12px; }
.dialog-body p { color:var(--muted); }
@media (max-width:800px) {
  .section-wrap { padding:75px 7vw; }
  .hero { grid-template-columns:1fr; gap:40px; min-height:0; }
  .hero-art { height:350px; }
  .project-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px 15px; }
  .about { gap:45px; grid-template-columns:.8fr 1.2fr; }
  .about-mark { min-height:290px; }
  .contact { gap:45px; }
}
@media (max-width:560px) {
  .site-header { padding:20px 6vw; }
  .menu-toggle { display:block; font-size:.75rem; cursor:pointer; }
  .menu-toggle span { padding-left:6px; }
  .main-nav { display:none; position:absolute; z-index:5; top:75px; left:0; right:0; padding:20px 6vw; background:var(--paper); border-bottom:1px solid var(--line); flex-direction:column; gap:17px; }
  .main-nav.is-open { display:flex; }
  .section-wrap { padding:65px 6vw; }
  h1 { font-size:3.35rem; }
  .hero-art { height:310px; }
  .section-heading { display:block; }
  .section-description { margin-top:18px; }
  .project-grid { grid-template-columns:1fr 1fr; gap:24px 12px; }
  .project-meta h3 { font-size:1rem; }
  .project-meta p { font-size:.64rem; }
  .filters { gap:7px; margin-top:30px; }
  .filter { padding:8px 11px; font-size:.65rem; }
  .about,.contact { grid-template-columns:1fr; gap:35px; }
  .about-mark { min-height:260px; }
  .site-footer { padding:25px 6vw; flex-wrap:wrap; }
  .site-footer > p { order:3; width:100%; text-align:left; margin:0; }
  .dialog-body { padding:0 20px 25px; }
}