:root { color-scheme: light; --paper:#fbfaf7; --ink:#252923; --muted:#686e65; --line:#e6e5de; --accent:#78836a; --card:#f0f1eb; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:90px; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Inter,'Avenir Next',Avenir,Arial,sans-serif; }
a { color:inherit; text-decoration:none; }
button,input,select,textarea { font:inherit; }
:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
h1,h2,h3,p { margin-top:0; }
h1,h2 { font-family:Georgia,'Times New Roman',serif; font-weight:400; }

/* header */
.nav { position:relative; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:10px clamp(20px,6vw,92px); border-bottom:1px solid var(--line); background:var(--paper); }
.brand { display:block; line-height:0; }
.brand-logo { display:block; width:92px; height:92px; object-fit:contain; }
.navlinks { display:flex; gap:28px; align-items:center; font-size:12px; letter-spacing:.08em; text-transform:uppercase; }
.navlinks a:hover,.navlinks a[aria-current="page"] { color:var(--accent); }
.navlinks .cta { border:1px solid var(--ink); padding:12px 17px; }
.navlinks .cta:hover { color:var(--ink); background:var(--card); }
.menu { display:none; background:none; color:var(--ink); border:1px solid var(--line); padding:9px 12px; cursor:pointer; }

/* shared bits */
.eyebrow { font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--accent); }
.btn { display:inline-flex; align-items:center; justify-content:center; background:var(--ink); color:var(--paper); padding:15px 22px; font-size:11px; text-transform:uppercase; letter-spacing:.13em; border:1px solid var(--ink); cursor:pointer; }
.btn:hover { opacity:.83; }
.btn:disabled { opacity:.6; cursor:wait; }
.text-link { font-size:12px; border-bottom:1px solid var(--accent); padding-bottom:5px; }
.section { padding:clamp(58px,8vw,108px) clamp(20px,7vw,110px); }
.section-head { display:flex; align-items:end; justify-content:space-between; gap:24px; margin-bottom:34px; }
h2 { font-size:clamp(38px,5vw,60px); line-height:1.05; margin:14px 0 0; letter-spacing:-.035em; }
.section-head p { color:var(--muted); max-width:310px; font-size:13px; line-height:1.8; margin-bottom:3px; }

/* hero */
.hero { display:grid; grid-template-columns:.8fr 1.2fr; min-height:610px; padding:clamp(32px,6vw,84px) clamp(20px,8vw,120px); gap:clamp(28px,5vw,76px); align-items:center; }
h1 { font-size:clamp(44px,5.3vw,70px); line-height:1.02; letter-spacing:-.05em; margin:23px 0; }
.hero p { color:var(--muted); font-size:15px; line-height:1.9; max-width:390px; }
.actions { display:flex; align-items:center; gap:22px; margin-top:30px; flex-wrap:wrap; }
.hero-art { position:relative; overflow:hidden; background:#e4e6dd; border-radius:3px; aspect-ratio:4/5; width:100%; max-width:540px; max-height:540px; justify-self:center; }
.hero-art img { display:block; width:100%; height:100%; object-fit:cover; object-position:center 35%; }
.art-note { position:absolute; z-index:2; right:18px; bottom:18px; background:rgba(250,247,241,.9); color:#282722; padding:12px 14px; font-size:9px; letter-spacing:.14em; text-transform:uppercase; }

/* featured cards (home) */
.gallery { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.photo { position:relative; min-height:420px; overflow:hidden; background:var(--card); border-radius:3px; display:block; }
.photo img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .5s; }
.photo:hover img { transform:scale(1.04); }
.photo:after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.34)); pointer-events:none; }
.photo-label { position:absolute; z-index:1; left:18px; right:18px; bottom:17px; display:flex; justify-content:space-between; align-items:end; gap:10px; color:#fff; text-shadow:0 1px 8px #333; }
.photo-label strong { font-family:Georgia,serif; font-size:25px; font-weight:400; }
.photo-label span { font-size:9px; letter-spacing:.16em; text-transform:uppercase; }
.more { margin-top:30px; }

/* about */
.about { background:var(--card); display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(30px,8vw,110px); align-items:center; }
.about-mark { display:grid; place-items:center; }
.about-mark img { display:block; width:min(100%,360px); height:auto; }
.about-copy p { color:var(--muted); font-size:14px; line-height:1.95; max-width:520px; }
.about-copy .text-link { display:inline-block; margin-top:8px; }

/* process */
.process { display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:42px; }
.step { border-top:1px solid var(--line); padding-top:18px; }
.step b { color:var(--accent); font-size:10px; letter-spacing:.18em; }
.step h3 { font-family:Georgia,serif; font-size:25px; font-weight:400; margin:14px 0 10px; }
.step p { color:var(--muted); font-size:13px; line-height:1.8; }

/* contact */
.contact { background:var(--card); display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,8vw,100px); }
.contact .eyebrow { color:#657258; }
.contact h2 { max-width:460px; }
.contact p { color:var(--muted); font-size:14px; line-height:1.9; max-width:390px; margin-top:20px; }
.form { display:grid; grid-template-columns:1fr 1fr; gap:17px; align-content:start; }
.field { display:flex; flex-direction:column; gap:8px; }
.field.full { grid-column:1/-1; }
.field label { font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.field input,.field select,.field textarea { width:100%; background:transparent; border:0; border-bottom:1px solid #c4c8bd; color:var(--ink); padding:11px 0; border-radius:0; }
.field input:focus,.field select:focus,.field textarea:focus { outline:none; border-bottom-color:var(--ink); }
.field textarea { min-height:82px; resize:vertical; }
.form .btn { grid-column:1/-1; justify-self:start; margin-top:7px; }
#form-status { grid-column:1/-1; font-size:12px; color:var(--muted); line-height:1.6; }
.footer { padding:25px clamp(20px,5vw,76px); display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; color:var(--muted); font-size:10px; letter-spacing:.1em; text-transform:uppercase; }

/* portfolio page */
.intro { padding:clamp(45px,7vw,90px) clamp(20px,7vw,110px) 10px; }
.intro p { color:var(--muted); line-height:1.8; max-width:620px; }
.cats { position:sticky; top:0; z-index:5; display:flex; gap:26px; flex-wrap:wrap; padding:16px clamp(20px,7vw,110px); background:rgba(251,250,247,.94); backdrop-filter:blur(6px); border-bottom:1px solid var(--line); font-size:12px; letter-spacing:.08em; text-transform:uppercase; }
.cats a:hover { color:var(--accent); }
.gallery-section { padding:clamp(34px,5vw,60px) clamp(20px,7vw,110px) 10px; }
.gallery-section h2 { font-size:clamp(30px,3.6vw,40px); margin:0 0 22px; }
.gal { container-type:inline-size; }
.grid { --cols:3; --gap:16px; display:grid; grid-template-columns:repeat(var(--cols),minmax(0,1fr)); gap:var(--gap); grid-auto-flow:dense; grid-auto-rows:calc((100cqw - (var(--cols) - 1) * var(--gap)) / var(--cols) / 1.5); }
.grid figure { margin:0; background:var(--card); border-radius:3px; overflow:hidden; }
.grid figure.tall { grid-row:span 2; }
.grid button { display:block; width:100%; height:100%; padding:0; border:0; background:none; cursor:zoom-in; }
.grid img { display:block; width:100%; height:100%; object-fit:cover; }
.grid button:hover img { opacity:.92; }
.cta-band { margin-top:50px; padding:clamp(40px,6vw,70px) clamp(20px,7vw,110px); background:var(--card); }
.cta-band h2 { margin-bottom:18px; }
.cta-band p { color:var(--muted); font-size:14px; line-height:1.8; max-width:520px; margin:0 0 22px; }

/* lightbox */
.lb { position:fixed; inset:0; z-index:50; display:none; align-items:center; justify-content:center; background:rgba(20,22,18,.93); padding:clamp(16px,4vw,56px); }
.lb.open { display:flex; }
.lb img { max-width:100%; max-height:100%; object-fit:contain; border-radius:2px; }
.lb button { position:absolute; background:none; border:0; color:#fff; font-size:34px; line-height:1; padding:14px 18px; cursor:pointer; opacity:.8; }
.lb button:hover { opacity:1; }
.lb .x { top:6px; right:8px; } .lb .prev { left:4px; top:50%; transform:translateY(-50%); } .lb .next { right:4px; top:50%; transform:translateY(-50%); }
body.lb-open { overflow:hidden; }

@media(max-width:760px) {
  .brand-logo { width:72px; height:72px; }
  .navlinks { display:none; position:absolute; z-index:10; top:100%; left:0; right:0; padding:24px; background:var(--paper); border-bottom:1px solid var(--line); flex-direction:column; align-items:stretch; gap:20px; }
  .navlinks.open { display:flex; }
  .menu { display:block; }
  .hero { grid-template-columns:1fr; padding-top:40px; min-height:0; }
  .hero-art { min-height:420px; } .hero-art img { height:420px; }
  .gallery { grid-template-columns:1fr 1fr; } .photo { min-height:300px; } .photo:nth-child(3) { grid-column:1/-1; }
  .about,.contact { grid-template-columns:1fr; }
  .about-mark img { width:min(70%,260px); }
  .section-head { align-items:start; flex-direction:column; }
  .process { grid-template-columns:1fr; gap:12px; }
  .grid { --cols:2; }
}
@media(max-width:430px) {
  .gallery { grid-template-columns:1fr; } .photo,.photo:nth-child(3) { min-height:340px; grid-column:auto; }
  .form { grid-template-columns:1fr; } .field.full,.form .btn,#form-status { grid-column:1; }
  h1 { font-size:52px; }
  .grid { --cols:1; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .photo img { transition:none; } }