/* Graphics By Far — shared studio chrome (matches the homepage) */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{margin:0;background:#f7f6f2;color:#0a0a0a;font-family:"Helvetica Neue",Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit}
.page-wrap{max-width:1680px;margin:0 auto}

/* header */
.site-header{height:72px;padding:0 3.5vw;display:flex;align-items:center;justify-content:space-between;background:#fff;border-bottom:1px solid #e2dfd8;position:sticky;top:0;z-index:20}
.logo{font-family:"Arial Black","Helvetica Neue",Arial,sans-serif;font-size:18px;font-weight:900;letter-spacing:-.01em;color:#0a0a0a;text-decoration:none}
.nav{display:flex;gap:34px;font-size:11px;font-weight:700;letter-spacing:.12em}
.nav a{color:#111;text-decoration:none;padding-bottom:4px;border-bottom:1.5px solid transparent;transition:border-color .2s,opacity .2s}
.nav a:hover{opacity:.55}
.nav a.active{border-bottom-color:#111}

/* footer */
.site-footer{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;padding:30px 3.5vw;background:#fff;border-top:1px solid #e2dfd8;font-size:12px;letter-spacing:.04em;color:#6a6a64}
.site-footer a{color:#111;text-decoration:none}
.next-project{font-weight:700;letter-spacing:.1em;font-size:12px}

/* WORK index */
.work-head{padding:6vw 3.5vw 2.5vw;display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:16px}
.work-head h1{margin:0;font-family:"Arial Black","Helvetica Neue",Arial,sans-serif;font-size:clamp(40px,6vw,92px);line-height:.9;letter-spacing:-.04em;text-transform:uppercase}
.work-head .idx{margin:0;font-size:12px;letter-spacing:.16em;font-weight:700;color:#8a8a84;text-transform:uppercase}
.work-index{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:0 0 4px}
.project{display:block;text-decoration:none;color:inherit;background:#0a0a0a;overflow:hidden;position:relative}
.project-img{aspect-ratio:4/3;overflow:hidden}
.project-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.project:hover .project-img img{transform:scale(1.03)}
.project-row{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:22px 30px 4px;background:#fff}
.project-row h2{margin:0;font-size:clamp(22px,2vw,30px);letter-spacing:-.02em}
.project-tag{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#8a8a84;white-space:nowrap}
.project-desc{margin:0;padding:0 30px 26px;background:#fff;font-size:14px;color:#565651}
.project .view{padding:0 30px 26px;background:#fff;font-size:12px;font-weight:700;letter-spacing:.1em;color:#111}

/* simple content pages */
.content{padding:7vw 3.5vw 8vw;max-width:1100px}
.content .eyebrow{margin:0 0 20px;font-size:12px;letter-spacing:.18em;font-weight:700;color:#8a8a84;text-transform:uppercase}
.content h1{margin:0 0 26px;font-family:"Arial Black","Helvetica Neue",Arial,sans-serif;font-size:clamp(44px,7vw,104px);line-height:.9;letter-spacing:-.04em;text-transform:uppercase}
.content .lead{margin:0 0 40px;font-size:clamp(18px,2vw,24px);line-height:1.5;max-width:760px;color:#1a1a1a}
.content .rows{border-top:1px solid #e2dfd8;max-width:820px}
.content .row{display:flex;gap:24px;padding:22px 0;border-bottom:1px solid #e2dfd8}
.content .row .n{font-size:12px;font-weight:700;color:#8a8a84;letter-spacing:.1em;min-width:38px}
.content .row .t{font-size:17px;font-weight:600;min-width:230px}
.content .row .d{font-size:15px;color:#565651;line-height:1.6}
.content .mail{display:inline-block;margin:8px 0 0;font-size:clamp(22px,3vw,40px);font-weight:700;letter-spacing:-.02em;text-decoration:none;border-bottom:2px solid #111;padding-bottom:4px}
.content .wip{margin-top:56px;font-size:12px;letter-spacing:.06em;color:#9a9a94}
@media(max-width:820px){.work-index{grid-template-columns:1fr}.content .row{flex-direction:column;gap:6px}}

/* WORK — LoLo Coco feature (studio -> books bridge) */
.feature{display:grid;grid-template-columns:1.05fr 1fr;border-top:1px solid #e2dfd8;background:#fff}
.feature-media{overflow:hidden;background:#bfe0f2;min-height:560px}
.feature-media img{width:100%;height:100%;object-fit:cover;object-position:center}
.feature-copy{padding:5vw 5vw;display:flex;flex-direction:column;justify-content:center}
.feature-eyebrow{margin:0 0 16px;font-size:12px;letter-spacing:.18em;font-weight:700;text-transform:uppercase;color:#8a8a84}
.feature-copy h2{margin:0 0 20px;font-family:"Arial Black","Helvetica Neue",Arial,sans-serif;font-size:clamp(38px,4.5vw,72px);line-height:.9;letter-spacing:-.04em;text-transform:uppercase}
.feature-copy p{margin:0;font-size:16px;line-height:1.6;color:#454540;max-width:520px}
.feature-books{display:flex;gap:16px;margin:30px 0 34px}
.feature-books img{width:110px;height:auto;border-radius:4px;box-shadow:0 8px 24px rgba(0,0,0,.16)}
.feature-ctas{display:flex;gap:26px;flex-wrap:wrap;align-items:center}
.feature-cta{font-size:13px;font-weight:700;letter-spacing:.06em;text-decoration:none;color:#111;border-bottom:1.5px solid transparent;padding-bottom:3px;transition:opacity .2s}
.feature-cta.primary{border-bottom-color:#111}
.feature-cta:hover{opacity:.55}
@media(max-width:820px){.feature{grid-template-columns:1fr}.feature-media{min-height:70vw}.feature-copy{padding:44px 24px}}

/* MOBILE HEADER FIX */
@media (max-width: 700px){
  .site-header{ height:auto; flex-wrap:wrap; align-items:center; gap:8px 16px; padding:12px 5vw; }
  .logo{ white-space:nowrap; font-size:15px; }
  .nav{ width:100%; gap:14px 18px; flex-wrap:wrap; font-size:10px; letter-spacing:.08em; }
}