@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;600;700;800&display=swap');
:root{--ink:#172620;--muted:#68766e;--paper:#f4f4ee;--lime:#c8e16a;--line:#dce0d6}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:'Noto Sans TC',sans-serif}header{height:76px;padding:0 7vw;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{display:flex;gap:10px;align-items:baseline;text-decoration:none;color:var(--ink);font-weight:800;font-size:20px}.brand small{font-size:11px;color:var(--muted);font-weight:500}nav{display:flex;gap:32px}nav a{color:var(--ink);text-decoration:none;font-size:13px}.hero{min-height:610px;display:grid;grid-template-columns:1fr 1fr;position:relative;padding:72px 7vw 65px;gap:5vw}.hero-copy{align-self:center;max-width:520px}.eyebrow{font-size:11px;letter-spacing:.18em;font-weight:700;color:#718044}.hero h1{font-size:clamp(42px,6vw,76px);line-height:1.23;letter-spacing:-.05em;margin:20px 0}.hero h1 em{font-style:normal;color:#637b27}.hero-copy>p:not(.eyebrow){color:var(--muted);line-height:1.9;max-width:440px}.button{display:inline-flex;gap:30px;align-items:center;background:var(--ink);color:white;text-decoration:none;padding:14px 20px;margin-top:20px;font-size:13px}.button b{font-size:18px}.hero-image{height:450px;align-self:center;overflow:hidden;position:relative}.hero-image:after{content:'FIELD NOTES / 2026';position:absolute;bottom:15px;left:15px;color:white;font-size:10px;letter-spacing:.15em;text-shadow:0 1px 8px #000}.hero-image img{width:100%;height:100%;object-fit:cover}.hero-note{position:absolute;bottom:28px;left:7vw;font-size:11px;color:var(--muted);letter-spacing:.08em}.hero-note span{margin-left:15px;color:#9ba28f}.services,.projects{padding:100px 7vw}.services h2,.projects h2,.contact h2{font-size:40px;margin:10px 0 40px;letter-spacing:-.04em}.service-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}.service-grid article{padding:25px 22px 20px 0;border-bottom:1px solid var(--line)}.service-grid article b{font-size:11px;color:#819246}.service-grid h3{font-size:18px;margin:20px 0 8px}.service-grid p{font-size:13px;color:var(--muted);line-height:1.8}.projects{background:#e9ebe2}.section-head{display:flex;align-items:end;justify-content:space-between}.section-head h2{margin-bottom:28px}.section-head>p{font-size:13px;color:var(--muted)}.filters{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 28px}.filters button{border:1px solid #cad0c2;background:transparent;color:var(--ink);padding:8px 14px;border-radius:20px;font:inherit;font-size:12px;cursor:pointer}.filters button.active{background:var(--ink);color:white;border-color:var(--ink)}.project-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.card{background:var(--paper);cursor:pointer}.card img{display:block;width:100%;aspect-ratio:1.2;object-fit:cover;transition:transform .4s}.card:hover img{transform:scale(1.035)}.card .photo{overflow:hidden}.card h3{font-size:14px;padding:0 14px;margin:14px 0 2px}.card p{font-size:11px;color:var(--muted);padding:0 14px 16px;margin:0}.contact{padding:85px 7vw;background:#293a30;color:white;display:flex;align-items:center;justify-content:space-between}.contact .eyebrow{color:var(--lime)}.contact h2{margin:15px 0}.contact p:not(.eyebrow){color:#d0d7ca;font-size:13px}.light{background:var(--lime);color:var(--ink);white-space:nowrap}footer{padding:24px 7vw;display:flex;justify-content:space-between;font-size:11px;color:var(--muted)}dialog{border:0;padding:20px;max-width:min(90vw,950px);background:var(--paper)}dialog::backdrop{background:#111c}dialog img{max-height:75vh;max-width:85vw;display:block}.close{float:right;border:0;background:none;font-size:28px;cursor:pointer}dialog p{font-size:13px}@media(max-width:800px){header{padding:0 5vw}nav{gap:14px}nav a{font-size:11px}.hero{padding:45px 5vw;grid-template-columns:1fr;gap:24px}.hero-image{height:330px;grid-row:1}.hero-note{left:5vw}.services,.projects{padding:70px 5vw}.service-grid{grid-template-columns:repeat(2,1fr);column-gap:20px}.project-grid{grid-template-columns:repeat(2,1fr)}.section-head{display:block}.section-head>p{margin-top:-20px}.contact{padding:65px 5vw;display:block}.contact .button{margin-top:10px}footer{padding:22px 5vw;gap:15px;flex-direction:column}}

.category-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:24px 0 46px}.category-card{padding:0 0 18px;text-align:left;border:0;background:var(--paper);color:var(--ink);cursor:pointer;overflow:hidden}.category-card img{width:100%;aspect-ratio:1.25;object-fit:cover;display:block}.category-card strong,.category-card small,.category-index{display:block;margin:12px 14px 0}.category-card strong{font-size:14px}.category-card small,.category-index{font-size:11px;color:var(--muted)}.category-card:hover img{filter:brightness(.9)}@media(max-width:800px){.category-cards{grid-template-columns:repeat(2,1fr)}}

#album-view[hidden],#category-view[hidden]{display:none!important}.back-button{border:1px solid #bac3ae;background:transparent;color:var(--ink);padding:10px 15px;cursor:pointer;font:inherit;font-size:12px}.album-heading{display:flex;align-items:baseline;justify-content:space-between;margin:18px 0 25px}.album-heading h3{font-size:24px;margin:0}.album-heading p{font-size:12px;color:var(--muted)}

.contact-copy a{color:#e5f2c4;text-decoration:none}.contact-copy a:hover{text-decoration:underline}.business-card-link{display:block;width:min(43vw,610px);color:var(--ink);text-decoration:none}.business-card-link img{display:block;width:100%;height:auto;border-radius:4px}.business-card-link span{display:block;color:#d9e7b0;font-size:12px;margin-top:10px;text-align:right}@media(max-width:800px){.business-card-link{width:100%;margin-top:28px}}

.brand{font-size:24px;letter-spacing:.035em}.brand span{font-size:29px;font-weight:800;color:#526d27}.brand small{font-size:12px;letter-spacing:.04em}@media(max-width:800px){.brand{font-size:21px}.brand span{font-size:26px}.brand small{font-size:11px}}

/* Subtle brand watermark on website photo displays; source photographs stay untouched. */.hero-image,.category-card,.project-grid .photo,#viewer{position:relative}.hero-image:before,.category-card:before,.project-grid .photo:after,#viewer:after{content:'聖頡';position:absolute;z-index:2;pointer-events:none;color:#fff;font-weight:800;letter-spacing:.12em;opacity:.26;text-shadow:0 1px 5px rgba(0,0,0,.45);transform:rotate(-18deg)}.hero-image:before{left:20%;top:46%;font-size:clamp(40px,6vw,76px)}.category-card:before{left:16%;top:32%;font-size:34px}.project-grid .photo:after{left:20%;top:44%;font-size:clamp(30px,4vw,50px)}#viewer:after{left:50%;top:49%;font-size:clamp(40px,8vw,76px);transform:translate(-50%,-50%) rotate(-18deg)}