/* A quieter palette, precise surfaces, and translucent navigation. */
:root { --paper:#f7f7f3; --ink:#252b26; --dark-line:rgba(37,43,38,.12); }
body { font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC",sans-serif; }
body::after { opacity:.012; }
section[id] { scroll-margin-top:100px; }
.site-header {
  inset:18px auto auto 50%; transform:translateX(-50%);
  width:min(890px,calc(100% - 48px)); padding:15px 24px;
  border-radius:50px; color:#253027;
  background:rgba(250,252,247,.32); border:1px solid rgba(255,255,255,.28);
  backdrop-filter:blur(24px) saturate(1.35); -webkit-backdrop-filter:blur(24px) saturate(1.35);
  box-shadow:0 8px 32px rgba(0,0,0,.08),inset 0 1px 0 rgba(255,255,255,.18);
}
.site-header.is-scrolled {
  padding:12px 24px; background:rgba(250,252,247,.48);
  box-shadow:0 10px 35px rgba(20,32,22,.1),inset 0 1px 0 rgba(255,255,255,.2);
}
nav { gap:10px; } nav a { padding:8px 13px; border-radius:24px; opacity:.8; transition:background .35s,color .35s; }
nav a span { display:none; } nav a:hover,nav a.active { background:rgba(40,63,43,.08); color:#26372a; opacity:1; }
.brand { font-family:-apple-system,BlinkMacSystemFont,sans-serif; font-weight:600; letter-spacing:.03em; }
.brand span { font-family:"Noto Serif SC",serif; }
.hero { padding-bottom:12vh; }
.hero::after { background:linear-gradient(90deg,rgba(14,25,18,.86),rgba(16,28,20,.5) 47%,rgba(12,23,16,.12)); }
.hero h1 { line-height:1.4; }.hero h1 em { color:#cfd8ba; }
.hero-name,.eyebrow { letter-spacing:.09em; }
.hero-invitation {
  border:1px solid rgba(255,255,255,.35); border-radius:40px;
  background:rgba(246,250,237,.13); padding:13px 21px; gap:25px;
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 8px 24px rgba(0,0,0,.09);
  transition:background .35s,transform .35s,box-shadow .35s;
}
.hero-invitation:hover { background:rgba(246,250,237,.23); transform:translateY(-2px); box-shadow:0 12px 30px rgba(0,0,0,.18); }
.opening { background:var(--paper); box-shadow:none; }
.section-cap { border:0; }.section-cap,.section-index { color:#788273; }
.opening p:not(.section-index),.fragment-intro>p,.about-grid>div>p,
.ai-introduction p,.ai-perspectives p,.case-detail,.notes-preface,.method li p {
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC",sans-serif;
  font-weight:400; line-height:2; color:#657064;
}
.living-system {
  color:#29312b; background:var(--paper);
  overflow:visible;
}
.living-system .section-cap { color:#788273; border:0; }
.system-heading h2 em { color:#748361; }
.exploration-status { color:#647257; }
.ai-perspectives { gap:24px; border:0; margin-top:60px; }
.ai-perspectives article {
  position:relative; overflow:hidden; min-height:290px; padding:38px 30px;
  border-radius:28px; border:1px solid rgba(255,255,255,.9);
  background:linear-gradient(145deg,#fff 10%,#f3f5ef 100%);
  box-shadow:0 4px 8px rgba(44,56,38,.025),0 18px 42px rgba(44,56,38,.065);
  transition:transform .55s cubic-bezier(.2,.7,.2,1),box-shadow .55s;
}
.ai-perspectives article::after {
  content:""; position:absolute; right:-24px; top:-24px; width:135px; height:135px;
  border-radius:50%; pointer-events:none; opacity:.75;
  background:radial-gradient(circle at 32% 28%,#fff 0%,#e4e9d9 34%,#ccd6bd 67%,#b6c3a6 100%);
  box-shadow:inset -8px -8px 20px rgba(99,124,76,.08); transform:translate(12px,-12px);
}
.ai-perspectives article:nth-child(2)::after { background:radial-gradient(circle at 32% 28%,#fff,#e8e6dc 40%,#cec9b9); }
.ai-perspectives article:nth-child(3)::after { background:radial-gradient(circle at 32% 28%,#fff,#e2e8e6 40%,#bfcfca); }
.ai-perspectives span { position:relative; z-index:1; color:#788471; font-size:.58rem; }
.ai-perspectives h3 { position:relative; z-index:1; margin-top:50px; font-weight:500; }
.ai-perspectives p { position:relative; z-index:1; font-size:.88rem; }
.ai-perspectives article:hover { transform:translateY(-7px); box-shadow:0 28px 55px rgba(44,56,38,.12); }
.living-system.is-revealed .ai-perspectives article { animation:copy-arrive .9s backwards cubic-bezier(.2,.7,.2,1); }
.living-system.is-revealed .ai-perspectives article:nth-child(2) { animation-delay:.13s; }
.living-system.is-revealed .ai-perspectives article:nth-child(3) { animation-delay:.26s; }
.fragments { background:var(--paper); }
.fragment-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; border:0; }
.case-study {
  display:grid; grid-template-columns:1fr 36px; gap:20px; padding:30px;
  border:1px solid #eaede6; border-radius:26px; background:#f7f8f5;
  align-content:start; min-height:210px;
}
.case-no { grid-column:1; color:#808977; }.case-title { grid-column:1/-1; grid-row:2; gap:12px; }
.case-state { grid-column:1; grid-row:3; margin-top:12px; }.case-arrow {
  grid-column:2; grid-row:1; display:grid; place-items:center; width:36px; height:36px;
  border-radius:50%; background:#e8ece2; color:#5e6d53;
}
.case-detail { grid-column:1/-1; font-size:.88rem; }.case-title small { font-family:inherit; color:#788271; }
.case-study:hover,.case-study:focus-visible { padding:30px; background:#fafbf8; box-shadow:0 20px 45px rgba(37,52,31,.08); }
.method { background:var(--paper); }.material-study { border-radius:25px; padding:10px; background:#fff; box-shadow:0 28px 55px rgba(30,42,24,.14),0 2px 5px rgba(30,42,24,.04); }
.material-study img { border-radius:18px; }.method li { border-color:rgba(32,43,28,.1); }.method ol { border-color:rgba(32,43,28,.1); }
.about { background:var(--paper); }.about-portrait img { border-radius:28px; border:8px solid #fff; box-shadow:0 28px 65px rgba(30,40,26,.13); }
.about-portrait::before { border-radius:28px; background:#eef1e8; }.about-portrait figcaption { padding:6px 10px; }
.contact-link { border:0; border-radius:25px; padding:12px 20px; background:#edf1e7; font-family:inherit; font-size:.75rem; }
.contact-link:hover { background:#e4eada; }
a:focus-visible,button:focus-visible { outline:2px solid #869575; outline-offset:5px; }
.hero h1 { font-weight:400; }.hero-lede { max-width:32rem; }
.opening,.living-system,.fragments,.method,.together,.about { padding-block:clamp(4.5rem,8vw,8rem); }
.living-system .system-heading { margin-top:3.5rem; }
.ai-perspectives { gap:0; padding:12px 0; border:1px solid #e4e8de; border-radius:24px; background:rgba(255,255,255,.48); box-shadow:0 16px 40px rgba(50,63,40,.035); }
.ai-perspectives article { min-height:0; border:0; border-radius:0; background:none; box-shadow:none; padding:28px 32px; }
.ai-perspectives article+article { border-left:1px solid #e4e8de; }
.ai-perspectives article::after { display:none; }.ai-perspectives h3 { margin-top:1.6rem; }
.ai-perspectives article:hover { transform:translateY(-3px); box-shadow:none; }
.featured-project { display:grid; grid-template-columns:1.25fr .75fr; gap:5vw; align-items:center; margin:3.5rem 0; }
.project-preview { margin:0; padding:10px; border-radius:22px; background:#fdfefb; border:1px solid #e3e8dd; box-shadow:0 22px 50px rgba(45,57,36,.09); }
.preview-bar { display:flex; justify-content:space-between; align-items:center; padding:10px 10px 16px; color:#78836e; font:.53rem "DM Mono",monospace; letter-spacing:.08em; }
.preview-bar span:first-child { color:#34422b; font-weight:500; }.preview-cover { position:relative; overflow:hidden; border-radius:13px; aspect-ratio:1.42; background:#233023; isolation:isolate; }
.preview-cover img { width:100%; height:100%; object-fit:cover; }
.preview-cover::after { content:""; position:absolute; inset:0; z-index:0; background:linear-gradient(90deg,rgba(12,25,15,.84),rgba(12,25,15,.22)); }
.preview-title { position:absolute; z-index:1; left:8%; bottom:14%; color:#f3f4ea; font:400 clamp(1.3rem,2.25vw,2.2rem)/1.65 "Noto Serif SC",serif; }.preview-title em { font-style:normal; color:#cfd8ba; }
.project-preview figcaption { padding:14px 10px 6px; color:#89917f; font-size:.6rem; letter-spacing:.02em; line-height:1.8; }
.project-label { margin:0 0 1.5rem; color:#8a947d; font:.55rem "DM Mono",monospace; letter-spacing:.1em; }
.project-copy h3 { font:400 clamp(1.35rem,2vw,2rem)/1.6 "Noto Serif SC",serif; margin:0 0 1.5rem; }
.project-copy>p:not(.project-label) { color:#6b7664; font-size:.9rem; line-height:2; margin:0 0 1rem; }
.project-tags { display:flex; flex-wrap:wrap; list-style:none; gap:8px; padding:0; margin:1.5rem 0; }.project-tags li { font-size:.61rem; color:#748267; padding:6px 10px; border:1px solid #e1e7d9; border-radius:20px; }
.project-link { display:inline-flex; align-items:center; gap:26px; font-size:.7rem; color:#5b6c4c; padding:8px 0; border-bottom:1px solid #bcc7af; }.project-link span { transition:transform .35s; }.project-link:hover span { transform:translate(3px,-3px); }
.fragments .fragment-list { gap:32px; border-top:1px solid #e1e6da; padding-top:2rem; }
.fragments .case-study { min-height:0; padding:18px 0; border-radius:0; border:0; background:none; box-shadow:none; }
.fragments .case-study:hover,.fragments .case-study:focus-visible { padding:18px 0; background:none; box-shadow:none; }
.method { grid-template-columns:1.15fr .85fr; gap:9vw; }.method-copy { order:1; }.material-study { order:2; width:85%; justify-self:end; transform-origin:center; }
.personal-note { padding:0; margin:2rem 0 1.5rem; color:#6a7561; font:400 clamp(.96rem,1.15vw,1.1rem)/2.2 "Noto Serif SC",serif; }
.note-attribution { font-size:.62rem; color:#929a87; letter-spacing:.06em; }
.opening p:not(.section-index) { max-width:38rem; }.section-cap { font-size:.62rem; letter-spacing:.1em; }
.ai-perspectives h3 { font-size:1.3rem; }.case-title strong { font-weight:500; }
.about-grid>div>.about-kicker { margin-bottom:1rem; font-size:.78rem; color:#7c8576; }
.about-grid>div>.about-signoff { font-size:1.05rem; font-family:"Noto Serif SC",serif; line-height:2.1; }
.together {
  position:relative; padding:clamp(5rem,10vw,9rem) 10vw;
  background:var(--paper);
}
.together .section-cap { color:#9a8872; }
.together-grid { display:grid; grid-template-columns:1.05fr .95fr; gap:9vw; align-items:center; margin-top:4rem; }
.together-scene { position:relative; margin:0; padding:10px; border-radius:24px; background:#fffcf6; box-shadow:0 25px 65px rgba(96,75,47,.13),0 2px 8px rgba(96,75,47,.04); }
.together-scene::before { content:""; position:absolute; z-index:-1; inset:23px -20px -20px 23px; border:1px solid #d6c7b1; border-radius:24px; }
.together-scene img { width:100%; border-radius:16px; }
.together-scene figcaption { padding:17px 12px 8px; color:#9b8770; font:400 .7rem/1.7 "Noto Serif SC",serif; letter-spacing:.08em; }
.together-eyebrow { font:.54rem "DM Mono",monospace; letter-spacing:.14em; color:#9a8770; margin:0 0 1.7rem; }
.together-copy h2 { margin:0 0 2rem; font:400 clamp(1.8rem,2.7vw,3rem)/1.6 "Noto Serif SC",serif; letter-spacing:.02em; color:#4f5145; }
.together-copy h2 em { font-style:normal; color:#a18b6d; }
.together-copy>p:not(.together-eyebrow) { max-width:29rem; font-size:.93rem; line-height:2.15; color:#807660; margin:0 0 1.1rem; }
.together-copy>.together-line { margin-top:2.2rem!important; font-family:"Noto Serif SC",serif; font-size:1.04rem!important; color:#92795c!important; }
.together-signature { display:block; margin-top:2.4rem; padding-top:1.1rem; border-top:1px solid #ded4c4; color:#aa9580; font:.68rem "Noto Serif SC",serif; letter-spacing:.05em; }
.together.is-revealed .together-copy { animation:copy-arrive 1.1s .15s backwards; }
footer { color:#aeb7a5; } footer a { transition:color .3s; } footer a:hover { color:#fff; }
@media(max-width:1000px) {
  .ai-perspectives { gap:15px; }.ai-perspectives article { padding:28px 22px; }
}
@media(max-width:760px) {
  .site-header { top:12px; width:calc(100% - 24px); padding:10px 14px; gap:8px; }
  .site-header.is-scrolled { padding:10px 14px; } nav { gap:0; } nav a { padding:8px 9px; font-size:.65rem; }
  .brand span { display:none; }.hero { padding-bottom:65px; }
  .ai-perspectives { grid-template-columns:1fr; gap:18px; margin-top:35px; }
  .ai-perspectives article { min-height:230px; padding:30px; }.ai-perspectives article+article { border:1px solid rgba(255,255,255,.9); }
  .fragment-list { grid-template-columns:1fr; gap:18px; }.case-study { padding:26px; min-height:200px; }
  .case-study:hover,.case-study:focus-visible { padding:26px; }.case-state { display:block; }.case-detail { grid-column:1/-1; }
  .about-portrait { width:min(65%,18rem); }.material-study { width:70%; box-shadow:0 25px 45px rgba(30,42,24,.14); }
  nav a { padding:8px 7px; }.together { padding:4.7rem 1.3rem; }
  .together-grid { grid-template-columns:1fr; gap:3.5rem; margin-top:2.5rem; }
  .together-scene { width:calc(100% - 15px); }.together-copy { padding:0 .4rem; }
  .together .section-cap>span:last-child { font-size:.46rem; }.together-copy h2 { font-size:1.85rem; }
  .opening,.living-system,.fragments,.method,.together,.about { padding-block:4.5rem; }
  .ai-perspectives { padding:4px 20px; gap:0; }.ai-perspectives article { min-height:0; padding:24px 4px; }
  .ai-perspectives article+article { border:0; border-top:1px solid #e4e8de; }
  .featured-project { grid-template-columns:1fr; gap:2.5rem; margin:2.5rem 0; }
  .preview-title { font-size:1.45rem; }.project-copy { padding:0 4px; }.project-copy h3 { font-size:1.55rem; }
  .fragments .fragment-list { gap:14px; padding-top:1rem; }.method { grid-template-columns:1fr; gap:3rem; }
  .material-study { width:64%; margin-right:8px; }.personal-note { font-size:1rem; }
}
@media(prefers-reduced-motion:reduce) {
  .living-system.is-revealed .ai-perspectives article { animation:none; }
  .ai-perspectives article:hover,.hero-invitation:hover { transform:none; }
  .together.is-revealed .together-copy { animation:none; }
}