@font-face{
  font-family:'Questrial';
  src:url('../fonts/Questrial-Regular.ttf') format('truetype');
  font-weight:400;
  font-style:normal;
  font-display:optional;
}
:root{
  --bg:oklch(0.99 0.005 20);
  --ink:oklch(0.32 0.045 45);
  --ink-soft:oklch(0.45 0.04 45);
  --pink:oklch(0.94 0.035 8);
  --pink-soft:oklch(0.96 0.025 8);
  --green:oklch(0.62 0.09 140);
  --green-ink:oklch(0.5 0.07 140);
  --green-soft:oklch(0.95 0.025 140);
  --line:oklch(0.9 0.02 20);
  --field:oklch(0.86 0.025 20);
  --hover:oklch(0.5 0.09 10);
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg)}
body{color:var(--ink);font-family:'Questrial','Century Gothic','Avenir Next',Avenir,sans-serif;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:var(--ink);text-decoration:none}
a:hover{color:var(--hover)}
img{max-width:100%;display:block}
.wrap{max-width:760px;margin:0 auto;padding-left:20px;padding-right:20px}
.section{padding-top:clamp(56px,8vw,88px)}

/* placeholders (shown when no image is set) */
.ph-pink{background:repeating-linear-gradient(135deg,oklch(0.92 0.045 5) 0 8px,oklch(0.945 0.035 5) 8px 16px)}
.ph-green{background:repeating-linear-gradient(135deg,oklch(0.92 0.045 140) 0 8px,oklch(0.945 0.035 140) 8px 16px)}
.ph-brown{background:repeating-linear-gradient(135deg,oklch(0.9 0.03 50) 0 10px,oklch(0.93 0.025 50) 10px 20px)}

/* home */
.hero-band{background:linear-gradient(to bottom,var(--pink) 0 62%,transparent 62%);padding:clamp(40px,8vw,88px) 20px 0;display:flex;justify-content:center}
.portrait{width:min(72vw,300px);aspect-ratio:1;object-fit:cover;border-radius:20px;border:6px solid var(--bg)}
.hero{padding-top:32px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px}
.name{margin:0;font-weight:400;font-size:clamp(40px,7vw,72px);line-height:1.02;letter-spacing:-0.01em}
.role{margin:0;font-size:clamp(16px,2vw,19px);color:var(--ink-soft)}
.tagline{margin:12px 0 0;padding:16px 24px;border-radius:20px;background:var(--green-soft);font-size:18px;line-height:1.55;max-width:44ch;text-wrap:balance}
.buttons{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:14px}
.btn{display:inline-block;padding:14px 28px;border-radius:999px;font:inherit;font-size:16px;white-space:nowrap;cursor:pointer;border:2px solid var(--ink)}
.btn-solid{background:var(--ink);color:var(--bg)}
.btn-solid:hover{background:var(--hover);border-color:var(--hover);color:var(--bg)}
.btn-outline{background:transparent}
.divider{width:56px;height:3px;border-radius:3px;background:var(--green);margin:28px 0 14px}
.nav{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 28px;font-size:16px}
.nav a[aria-current="page"]{color:var(--green-ink);text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:2px}

/* current work rows */
.label{margin:0 0 16px;font-weight:400;font-size:14px;letter-spacing:0.16em;text-transform:uppercase;color:var(--green-ink)}
.rows{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.row{display:flex;align-items:center;gap:20px;padding:14px 0;border-bottom:1px solid var(--line)}
.media-item{border-bottom:1px solid var(--line)}
.media-item .row{border-bottom:0}
.media-links{display:flex;flex-wrap:wrap;gap:8px 16px;padding:0 0 14px 104px}
.thumb{flex:0 0 auto;width:84px;aspect-ratio:1;border-radius:20px;object-fit:cover}
.thumb.thumb--contain{height:84px;object-fit:contain;object-position:center;padding:6px;border-radius:10px;background:var(--pink-soft)}
.thumb.thumb--fill{height:84px;object-fit:fill;padding:0}
.row-text{flex:1 1 auto;display:flex;flex-direction:column;gap:4px;min-width:0}
.eyebrow{font-size:13px;color:var(--green-ink)}
.row-title{font-size:clamp(17px,2.2vw,20px);line-height:1.3}
.arrow{flex:0 0 auto;font-size:20px}

/* contact */
.contact{background:var(--pink-soft);border-radius:32px;padding:clamp(24px,5vw,48px);display:flex;flex-direction:column;gap:24px}
.contact-head h2{margin:0 0 8px;font-weight:400;font-size:clamp(28px,4vw,36px)}
.contact-head p{margin:0;font-size:16px;color:var(--ink-soft)}
.form{display:flex;flex-direction:column;gap:16px}
.form-row{display:flex;flex-wrap:wrap;gap:16px}
.form-row label{flex:1 1 240px}
.form label{display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--ink-soft)}
.form input,.form select,.form textarea{width:100%;padding:14px 16px;border:1px solid var(--field);border-radius:14px;background:var(--bg);font:inherit;font-size:16px;color:var(--ink)}
.form textarea{resize:vertical}
.form input:focus,.form select:focus,.form textarea:focus{outline:2px solid var(--green);outline-offset:1px;border-color:transparent}
.form .btn{align-self:flex-start}
.hp{position:absolute;left:-9999px}

/* footer */
.footer{max-width:760px;margin:0 auto;padding:48px 20px;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 24px;font-size:15px;color:var(--ink-soft)}
.footer a{display:inline-flex;align-items:center;gap:5px}
.social-icon{width:11px;height:11px;flex:0 0 auto}

/* inner pages */
.page-header{background:var(--pink);padding:28px 20px 24px;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.site-name{font-size:clamp(22px,3vw,26px)}
.page{padding-top:clamp(40px,6vw,64px)}
.page-title{margin:0 0 12px;font-weight:400;font-size:clamp(34px,5vw,48px);line-height:1.1}
.intro{margin:0 0 32px;font-size:18px;color:var(--ink-soft)}
.page-title + .list,.page-title + .cards,.page-title + .about,.page-title + .empty{margin-top:32px}
.prose{font-size:17px;line-height:1.7}
.prose p{margin:0 0 1em}
.list{list-style:none;margin:0 0 56px;padding:0;border-top:1px solid var(--line)}
.item{display:flex;flex-direction:column;gap:4px;padding:18px 0;border-bottom:1px solid var(--line)}
.item-thumb{flex-direction:row;align-items:center;gap:20px}
.item-title{margin:0;font-weight:400;font-size:clamp(17px,2.2vw,20px);line-height:1.35}
.meta{margin:0;font-size:15px;color:var(--ink-soft)}
.more{font-size:15px;color:var(--green-ink)}
.tag{display:inline-block;padding:2px 10px;margin-right:6px;border-radius:999px;background:var(--green-soft);color:var(--green-ink)}
.empty{color:var(--ink-soft)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:32px;margin-bottom:56px}
.card{display:flex;flex-direction:column;gap:10px}
.card-img{width:100%;aspect-ratio:4/3;border-radius:24px;object-fit:cover;margin-bottom:6px}
.about{display:flex;flex-wrap:wrap;gap:32px;align-items:flex-start;margin-bottom:56px}
.about-photo{flex:0 0 auto;width:min(100%,220px);aspect-ratio:1;object-fit:cover;border-radius:20px}
.about-page .page-title{text-align:left}
.about .prose{flex:1 1 320px}
.about-page .about{margin-bottom:24px}
.about .prose > p:last-child{margin-bottom:0}
.about-details > h2:first-child{margin-top:0}
.about-details{margin-bottom:56px}
.about-details > ul > li{margin-bottom:16px}
.about-details li > ul{margin-top:4px;padding-left:24px}
.about-details li > ul > li{margin-bottom:2px}
.about .prose a,.about-details a{color:var(--green-ink);text-decoration:underline;text-underline-offset:3px}
.about .prose a:hover,.about-details a:hover{color:var(--hover)}
.page .meta + .rows{margin-top:24px}
.page .rows{margin-bottom:56px}
.intro + .rows,.intro + .empty{margin-top:0}