:root { --ink:#161815; --cream:#f2ede0; --paper:#fbf9f2; --coral:#ad4128; --moss:#8a8a62; --line:rgba(22,24,21,.22); color:var(--ink); background:var(--paper); font-family:"Noto Serif SC","Songti SC",STSong,serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); }
img { width:100%; height:100%; display:block; object-fit:cover; }
a { color:inherit; text-decoration:none; }
h1,h2,h3,p { margin-top:0; }
.eyebrow { margin:0 0 15px; color:var(--coral); font-family:Arial,sans-serif; font-size:10px; letter-spacing:1.8px; }

.hero { min-height:760px; display:grid; grid-template-columns:36.5% 63.5%; background:var(--cream); }
.hero-identity { min-height:760px; padding:32px clamp(30px,5vw,78px) 56px; display:flex; flex-direction:column; position:relative; }
.wordmark { width:max-content; font-size:26px; line-height:1; letter-spacing:2px; }
.wordmark small { display:block; margin-top:4px; color:var(--coral); font-family:Arial,sans-serif; font-size:7px; letter-spacing:1.4px; }
.hero-title-block { margin:auto 0 0; position:relative; }
h1 { margin:0; font-size:clamp(54px,5vw,82px); font-weight:500; line-height:1.07; letter-spacing:2px; }
.seal { display:grid; place-items:center; width:32px; height:32px; margin-top:25px; border:1px solid var(--coral); color:var(--coral); font-size:10px; }
.hero-intro { width:min(290px,100%); margin:35px 0 0; font-size:15px; line-height:2; }
.line-link { width:max-content; margin-top:25px; border-bottom:1px solid var(--ink); padding-bottom:7px; font-size:13px; }
.line-link b { margin-left:12px; color:var(--coral); font-family:Arial,sans-serif; }
.hero-visual { min-height:760px; position:relative; overflow:hidden; background:#9a8f70; }
nav { position:absolute; z-index:3; top:33px; right:5vw; display:flex; gap:27px; color:#fffdf6; font-family:Arial,sans-serif; font-size:11px; }
nav a { padding-bottom:5px; border-bottom:1px solid transparent; }
nav a:hover { border-color:#fffdf6; }
.hero-main-image { position:absolute; margin:0; inset:0; }
.hero-main-image::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(0,0,0,.18),transparent 42%),linear-gradient(0deg,rgba(0,0,0,.2),transparent 30%); }
.hero-main-image img { object-position:center 44%; filter:sepia(15%) saturate(77%) contrast(1.02); }
.vertical-note { position:absolute; z-index:3; right:22px; top:47%; margin:0; color:#fffdf6; font-family:Arial,sans-serif; font-size:8px; line-height:1.8; letter-spacing:1.8px; writing-mode:vertical-rl; }

.manifesto { padding:106px 7vw 100px; text-align:center; background:var(--paper); }
.manifesto p { margin:0; font-size:clamp(34px,4vw,58px); line-height:1.25; }
.manifesto em { color:var(--coral); font-style:normal; }
.manifesto span { display:block; margin-top:22px; color:#66675d; font-size:15px; }
.works { padding:100px max(7vw,40px) 122px; background:var(--paper); }
.works-heading { display:flex; align-items:end; justify-content:space-between; margin-bottom:44px; }
h2 { margin:0; font-size:clamp(34px,3.5vw,54px); font-weight:500; line-height:1.2; letter-spacing:1px; }
.works-heading > p { margin:0 0 5px; color:#6d6e65; font-size:12px; }
.gallery { display:grid; grid-template-columns:repeat(3,1fr); gap:42px 20px; max-width:1160px; margin:0 auto; }
.gallery figure { min-width:0; margin:0; display:flex; flex-direction:column; }
.gallery img { height:auto; aspect-ratio:.72; filter:saturate(.86) contrast(1.02); transition:filter .35s ease,transform .45s ease; }
.gallery figure:hover img { filter:saturate(1); transform:scale(1.012); }
.gallery figcaption { position:relative; display:grid; flex:0 0 42px; gap:4px; margin:12px 0 0; padding-left:13px; }
.gallery figcaption::before { content:""; position:absolute; top:2px; left:0; width:2px; height:29px; background:var(--ink); }
.gallery figcaption b { font-size:15px; font-weight:500; }
.gallery figcaption span { color:#6d6e65; font-family:Arial,sans-serif; font-size:9px; letter-spacing:1px; }

.process { display:grid; grid-template-columns:.86fr 1.14fr; gap:90px; padding:110px max(7vw,40px); background:#dedacb; }
.process header { padding-top:13px; }
.process ol { margin:0; padding:0; list-style:none; border-top:1px solid var(--line); }
.process li { display:grid; grid-template-columns:55px 1fr; gap:24px; padding:27px 0 28px; border-bottom:1px solid var(--line); }
.process li > span { color:var(--coral); font-family:Arial,sans-serif; font-size:11px; }
.process h3 { margin:0 0 8px; font-size:21px; font-weight:500; }
.process li p { margin:0; color:#61635a; font-size:14px; }

.experience { min-height:500px; padding:80px max(7vw,40px); display:grid; grid-template-columns:1fr 220px 195px; align-items:center; gap:60px; color:#f7f1e3; background:#191b17; background-image:linear-gradient(120deg,rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(0deg,rgba(255,255,255,.018) 1px,transparent 1px); background-size:9px 9px; }
.experience .eyebrow { color:#ca7058; }
.experience h2 { margin-bottom:24px; }
.experience-copy > p:last-child { max-width:365px; margin:0; color:#bebfb3; font-size:14px; line-height:1.9; }
.phone-mockup { height:325px; width:190px; padding:10px; border:2px solid #bbb6a8; border-radius:28px; transform:translateY(24px); }
.phone-screen { height:100%; padding:32px 20px; display:flex; flex-direction:column; align-items:center; background:#e9e5d9; color:var(--ink); }
.phone-screen span { font-size:20px; }
.phone-screen i { width:80px; height:1px; margin:38px 0 25px; background:var(--moss); }
.phone-screen strong { text-align:center; font-size:13px; font-weight:500; line-height:1.7; }
.qr-placeholder { width:150px; height:150px; display:grid; place-content:center; gap:7px; align-self:center; border:1px solid #bdb8aa; text-align:center; background:repeating-radial-gradient(circle at center,transparent 0 6px,rgba(255,255,255,.09) 7px 8px); }
.qr-placeholder span { font-size:24px; }
.qr-placeholder small { font-family:Arial,sans-serif; font-size:8px; letter-spacing:1.5px; }
.notice { padding:31px max(7vw,40px); background:var(--paper); }
.notice p { max-width:860px; margin:0; color:#6d6e65; font-size:12px; line-height:1.8; }
.site-footer { padding:35px max(7vw,40px); display:grid; grid-template-columns:1fr auto auto; gap:38px; align-items:end; border-top:1px solid var(--line); background:var(--paper); font-size:12px; }
.site-footer strong { font-size:24px; font-weight:500; }
.site-footer p { margin:7px 0 0; color:#6d6e65; }
.footer-links { display:flex; gap:20px; color:#6d6e65; }
.footer-links a:hover,.site-footer > a:hover { color:var(--coral); }
.site-footer > a { color:#6d6e65; }

@media (max-width:720px) {
  .hero { min-height:0; display:block; }
  .hero-identity { min-height:460px; padding:25px 23px 38px; }
  .hero-title-block { margin-top:88px; }
  h1 { font-size:51px; }
  .hero-intro { margin-top:24px; font-size:14px; }
  .line-link { margin-top:18px; }
  .hero-visual { min-height:494px; }
  nav { top:21px; right:23px; gap:15px; font-size:10px; }
  nav a:nth-child(2) { display:none; }
  .vertical-note { right:13px; }
  .manifesto { padding:75px 23px; text-align:left; }
  .manifesto p { font-size:37px; }
  .manifesto span { font-size:14px; }
  .works { padding:75px 23px; }
  .works-heading { display:block; margin-bottom:30px; }
  .works-heading > p { margin-top:13px; }
  .gallery { grid-template-columns:repeat(2,1fr); gap:31px 12px; }
  .gallery img { aspect-ratio:.72; }
  .gallery figcaption b { font-size:13px; }
  .process { display:block; padding:75px 23px; }
  .process header { margin-bottom:38px; }
  .process li { grid-template-columns:37px 1fr; gap:13px; }
  .process h3 { font-size:18px; }
  .experience { min-height:0; padding:75px 23px 0; display:block; }
  .experience h2 { font-size:37px; }
  .phone-mockup { width:165px; height:280px; margin:45px auto 0; transform:none; }
  .qr-placeholder { position:relative; width:110px; height:110px; margin:-83px 20px 28px auto; }
  .notice { padding:27px 23px; }
  .site-footer { display:block; padding:30px 23px 34px; }
  .footer-links { margin:27px 0 17px; flex-wrap:wrap; gap:12px 18px; }
}