/*
Theme Name: 345 Architecture
Theme URI: https://345arch.com
Author: 345 Architecture Inc.
Description: Custom portfolio theme for 345 Architecture Inc.
Version: 1.0.0
Text Domain: architecture-345
*/

:root { --ink: #111111; --paper: #ffffff; --line: rgba(17,17,17,.22); }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: Arial, "Microsoft YaHei", sans-serif; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }

.site-header { position: absolute; z-index: 10; top: 0; left: 0; width: 100%; display: flex; justify-content: space-between; align-items: flex-start; padding: 28px 3.2vw; }
.admin-bar .site-header { top: 32px; }
.brand { display: inline-flex; align-items: baseline; gap: 8px; font-size: 28px; font-weight: 800; letter-spacing: -.07em; line-height: 1; }
.brand-word { font-size: 11px; letter-spacing: .18em; font-weight: 600; }
.site-nav { display: flex; gap: clamp(24px,4vw,64px); font-size: 13px; }
.site-nav a { position: relative; padding-bottom: 5px; }
.site-nav a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .25s ease; }
.site-nav a:hover::after, .site-nav a:focus-visible::after { transform: scaleX(1); transform-origin: left; }

.eyebrow { font-size: 10px; letter-spacing: .18em; font-weight: 700; }
.hero-brand { position: relative; min-height: 100svh; overflow: hidden; background: #fff; }
.hero-brand > img { display: block; width: 100%; height: 100svh; object-fit: contain; object-position: center center; }
.hero-label { position: absolute; left: 3.2vw; right: 3.2vw; bottom: 24px; display: flex; justify-content: space-between; font-size: 9px; font-weight: 700; letter-spacing: .16em; }

.section { padding: 120px 3.2vw; }
.section-heading { display: grid; grid-template-columns: 1fr 2fr; align-items: end; border-top: 1px solid var(--line); padding-top: 18px; margin-bottom: 56px; }
.section-heading p { margin: 0; font-size: 9px; letter-spacing: .16em; }
.section-heading h2 { margin: 0; font-size: clamp(36px,5vw,76px); font-weight: 500; letter-spacing: -.04em; }
.project-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 72px 18px; align-items: start; }
.project:nth-child(2n) { margin-top: 8vw; }
.project-image { position: relative; aspect-ratio: 2400/1855; overflow: hidden; background: #f2f2f2; border: 1px solid #ededed; }
.project-image img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .55s cubic-bezier(.2,.7,.2,1); }
.project:hover .project-image img, .project:focus-visible .project-image img { transform: scale(1.018); }
.project-image span { position: absolute; z-index: 2; top: 14px; left: 14px; padding: 6px 7px; color: white; background: rgba(0,0,0,.68); font: 9px/1 monospace; }
.project-meta { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--line); }
.project-meta > div { display: grid; gap: 8px; }
.project-meta h3 { margin: 0; font-size: 15px; font-weight: 600; }
.project-meta p { margin: 0; font-size: 10px; color: #69685f; }
.project-meta .project-credit { max-width: 380px; font-size: 10px; line-height: 1.5; color: #8a8982; }

.studio { background: var(--ink); color: var(--paper); }
.section-heading.light { border-color: rgba(255,255,255,.25); }
.studio-copy { display: grid; grid-template-columns: 1fr 1fr; gap: 8vw; margin-top: 120px; }
.studio-lead { margin: 0; font-size: clamp(34px,4.6vw,72px); line-height: 1.25; letter-spacing: -.045em; }
.studio-lead span { display: inline-block; margin-top: 24px; font-size: clamp(12px,1.2vw,17px); line-height: 1.65; letter-spacing: .08em; color: #b9b8af; }
.studio-detail { align-self: end; max-width: 550px; }
.studio-detail > p { margin: 0 0 20px; font-size: 15px; line-height: 1.85; color: #b9b8af; }
.services { display: grid; grid-template-columns: 1fr 1fr; margin-top: 56px; border-top: 1px solid rgba(255,255,255,.25); }
.services span { padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,.25); font-size: 12px; }
.contact { min-height: 70vh; display: flex; flex-direction: column; justify-content: center; }
.contact h2 { font-size: clamp(48px,8vw,128px); font-weight: 500; letter-spacing: -.065em; margin: 55px 0 70px; }
.contact-links { display: flex; flex-wrap: wrap; gap: 28px 56px; }
.email { font-size: clamp(19px,2.2vw,34px); align-self: flex-start; border-bottom: 1px solid; padding-bottom: 10px; }
.site-footer { border-top: 1px solid var(--line); padding: 24px 3.2vw 34px; display: flex; justify-content: space-between; align-items: center; font-size: 9px; letter-spacing: .1em; }
.footer-brand { font-size: 22px; }

@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }
@media (max-width: 780px) {
  .site-header { padding: 22px 20px; } .site-nav { gap: 18px; font-size: 11px; }
  .hero-brand, .hero-brand > img { min-height: 100svh; height: 100svh; }
  .hero-brand > img { object-position: center 45%; }
  .hero-label { left: 20px; right: 20px; bottom: 22px; }
  .section { padding: 84px 20px; }
  .section-heading { grid-template-columns: 1fr; gap: 30px; margin-bottom: 36px; }
  .project-grid { grid-template-columns: 1fr; gap: 42px; } .project:nth-child(2n) { margin-top: 0; }
  .project-image { aspect-ratio: 2400/1855; } .studio-copy { grid-template-columns: 1fr; margin-top: 70px; gap: 70px; }
  .contact { min-height: 60vh; } .site-footer { padding-inline: 20px; } .site-footer p { display: none; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }