:root { --ink:#161310; --paper:#f1ece4; --cream:#faf7f1; --accent:#a94b2d; --muted:#756c64; --line:rgba(35,27,22,.14); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Arial, Helvetica, sans-serif; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; z-index:20; opacity:.025; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
a { color:inherit; text-decoration:none; }
img { display:block; width:100%; }
.topbar { height:96px; display:flex; align-items:center; justify-content:space-between; padding:0 5.5vw; position:absolute; inset:0 0 auto; z-index:10; color:#fff; border-bottom:1px solid rgba(255,255,255,.12); }
.brand { font-family:Georgia,serif; font-size:28px; font-weight:700; letter-spacing:-2px; }
.brand span, .footer-name span { color:var(--accent); }
nav { display:flex; gap:34px; font-size:11px; text-transform:uppercase; letter-spacing:.2em; }
nav a { position:relative; }
nav a::after { content:""; position:absolute; left:0; bottom:-8px; width:0; height:1px; background:#fff; transition:.25s; }
nav a:hover::after { width:100%; }
.hero { min-height:800px; display:grid; grid-template-columns:43% 57%; background:var(--ink); color:#fff; overflow:hidden; }
.hero-copy { padding:205px 5.5vw 110px; display:flex; flex-direction:column; align-items:flex-start; position:relative; z-index:2; }
.eyebrow,.section-index { font-size:10px; font-weight:700; letter-spacing:.32em; text-transform:uppercase; }
.eyebrow { color:#cfbdb2; margin:0 0 34px; }
.hero h1 { font-family:Georgia,serif; font-size:clamp(64px,8vw,126px); line-height:.79; letter-spacing:-.065em; margin:0 0 48px; font-weight:400; }
.hero h1 em,.about h2 em,.gallery-heading h2 em { color:var(--accent); font-weight:400; }
.intro { max-width:390px; color:#bdb5af; font-size:15px; line-height:1.8; margin:0 0 48px; }
.scroll-link { border-bottom:1px solid #6d625b; padding-bottom:10px; font-size:11px; text-transform:uppercase; letter-spacing:.2em; }
.scroll-link span { color:var(--accent); margin-left:18px; }
.hero-image-wrap { position:relative; min-width:0; }
.hero-image-wrap::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(22,19,16,.84),transparent 34%),linear-gradient(0deg,rgba(70,35,22,.13),rgba(70,35,22,.13)); }
.hero-image-wrap>img { height:100%; object-fit:cover; object-position:center 35%; filter:saturate(.66) contrast(1.08) sepia(.09) brightness(.94); }
.outline-word { position:absolute; z-index:2; bottom:50px; right:-12px; font:700 clamp(65px,10vw,150px)/1 Arial,sans-serif; color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.32); letter-spacing:-.07em; }
.image-note { position:absolute; z-index:3; right:5vw; top:130px; display:flex; align-items:flex-start; gap:18px; color:#fff; text-transform:uppercase; letter-spacing:.16em; font-size:9px; line-height:1.7; }
.image-note span { color:var(--accent); font-weight:700; }
.image-note p { margin:0; }
.about { padding:150px 8vw; display:grid; grid-template-columns:28% 72%; background:var(--cream); border-bottom:1px solid var(--line); }
.section-index { color:var(--accent); margin:8px 0 30px; }
.about h2,.gallery-heading h2 { font-family:Georgia,serif; font-weight:400; font-size:clamp(38px,5.3vw,78px); line-height:1.02; letter-spacing:-.045em; margin:0; }
.about>div>p { max-width:570px; margin:42px 0 0 35%; color:var(--muted); font-size:15px; line-height:1.9; }
.gallery-section { padding:150px 5.5vw 130px; }
.gallery-heading { display:grid; grid-template-columns:22% 1fr 27%; gap:30px; align-items:end; margin-bottom:86px; padding-bottom:44px; border-bottom:1px solid var(--line); }
.gallery-heading>p:last-child { color:var(--muted); font-size:13px; line-height:1.7; margin:0 0 7px; }
.mosaic { max-width:1320px; margin:auto; display:grid; grid-template-columns:repeat(12,1fr); grid-auto-rows:70px; gap:22px; }
.photo { margin:0; overflow:hidden; position:relative; background:#c9beb2; box-shadow:0 18px 48px rgba(43,29,20,.08); border-radius:10px; }
.photo::before { content:""; position:absolute; z-index:2; inset:0; pointer-events:none; background:linear-gradient(145deg,rgba(128,72,43,.16),rgba(24,27,27,.09)); mix-blend-mode:color; opacity:1; transition:opacity .72s ease; }
.photo::after { content:""; position:absolute; z-index:4; inset:0; pointer-events:none; border-radius:inherit; box-shadow:inset 0 0 0 1px rgba(255,255,255,.2); }
.photo img { height:100%; object-fit:cover; filter:saturate(.57) contrast(1.05) sepia(.12) brightness(.96); transition:transform .85s cubic-bezier(.2,.8,.2,1),filter .72s ease; }
.photo:hover img { transform:scale(1.025); filter:none; }
.photo:hover::before { opacity:0; }
.photo-shine { position:absolute; z-index:3; top:-30%; bottom:-30%; left:-55%; width:24%; pointer-events:none; opacity:0; transform:skewX(-18deg); background:linear-gradient(90deg,transparent,rgba(255,255,255,.48),transparent); filter:blur(2px); }
.photo:hover .photo-shine { animation:photo-glint 1.05s cubic-bezier(.2,.7,.25,1) both; }
@keyframes photo-glint { 0%{left:-55%;opacity:0} 16%{opacity:.72} 75%{opacity:.4} 100%{left:135%;opacity:0} }
.photo figcaption { position:absolute; z-index:3; inset:auto 0 0; padding:22px; color:#fff; opacity:.72; transition:.35s; }
.photo:hover figcaption { opacity:1; }
.photo figcaption span { display:inline-grid; place-items:center; width:32px; height:32px; border:1px solid rgba(255,255,255,.65); border-radius:50%; font-size:8px; letter-spacing:.12em; background:rgba(20,16,13,.12); backdrop-filter:blur(3px); }
.photo-a { grid-column:1/6; grid-row:1/7; }
.photo-b { grid-column:6/10; grid-row:1/5; }
.photo-c { grid-column:10/13; grid-row:1/7; }
.photo-d { grid-column:1/5; grid-row:7/13; }
.photo-e { grid-column:5/10; grid-row:5/13; }
.photo-f { grid-column:10/13; grid-row:7/13; }
.photo-g { grid-column:2/12; grid-row:13/21; }
.photo-g img { object-position:center 35%; }
footer { min-height:300px; padding:82px 5.5vw 68px; background:var(--ink); color:#fff; display:grid; grid-template-columns:1fr 1fr auto; align-items:end; gap:30px; border-top:1px solid rgba(255,255,255,.06); position:relative; overflow:hidden; }
.footer-name { font:400 clamp(34px,5vw,70px)/1 Georgia,serif; letter-spacing:-.04em; margin:0; }
footer>p:nth-child(2) { color:#9f9690; font-size:11px; letter-spacing:.08em; }
footer>a { width:46px; height:46px; display:grid; place-items:center; border:1px solid #5e5651; border-radius:50%; }
.hidden-signature { position:absolute; right:18px; bottom:10px; color:#fff; opacity:.055; font-size:7px; letter-spacing:.28em; user-select:none; }

@media (max-width:800px) {
  .topbar { height:72px; padding:0 22px; border-bottom-color:rgba(255,255,255,.09); }
  nav { gap:20px; font-size:9px; }
  .hero { min-height:auto; display:flex; flex-direction:column; }
  .hero-copy { padding:132px 24px 78px; min-height:520px; }
  .hero h1 { font-size:clamp(62px,21vw,92px); margin-bottom:30px; }
  .intro { font-size:13px; max-width:310px; margin-bottom:35px; }
  .hero-image-wrap { height:72vh; min-height:520px; }
  .hero-image-wrap::after { background:linear-gradient(180deg,rgba(23,20,18,.2),transparent 38%,rgba(23,20,18,.15)); }
  .outline-word { bottom:28px; font-size:21vw; }
  .image-note { top:30px; right:24px; }
  .about { padding:105px 24px; grid-template-columns:1fr; }
  .about h2 { font-size:46px; }
  .about>div>p { margin:30px 0 0; font-size:14px; }
  .gallery-section { padding:105px 14px 82px; }
  .gallery-heading { grid-template-columns:1fr; gap:13px; padding:0 10px 34px; margin-bottom:48px; }
  .gallery-heading h2 { font-size:53px; }
  .gallery-heading>p:last-child { max-width:270px; margin-top:8px; }
  .mosaic { grid-template-columns:repeat(2,1fr); grid-auto-rows:82px; gap:10px; }
  .photo-a { grid-column:1/3; grid-row:1/6; }
  .photo-b { grid-column:1/2; grid-row:6/10; }
  .photo-c { grid-column:2/3; grid-row:6/10; }
  .photo-d { grid-column:1/2; grid-row:10/15; }
  .photo-e { grid-column:2/3; grid-row:10/15; }
  .photo-f { grid-column:1/3; grid-row:15/21; }
  .photo-g { grid-column:1/3; grid-row:21/27; }
  .photo { box-shadow:0 10px 30px rgba(43,29,20,.07); }
  .photo figcaption { opacity:.85; padding:12px; }
  .photo figcaption span { width:27px; height:27px; font-size:7px; }
  footer { min-height:300px; grid-template-columns:1fr auto; padding:60px 24px 35px; }
  footer>p:nth-child(2) { grid-column:1/3; grid-row:1; align-self:start; }
}

@media (hover:none) { .photo:hover img { transform:none; filter:saturate(.57) contrast(1.05) sepia(.12) brightness(.96); } .photo:hover::before { opacity:1; } .photo:hover .photo-shine { animation:none; } }
@media (prefers-reduced-motion:reduce) { html{scroll-behavior:auto}.photo img{transition:none}.photo:hover .photo-shine{animation:none} }