@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600&family=Playfair+Display:ital,wght@1,600&display=swap');

:root { --plum:#2e1538; --plum-2:#44204f; --cream:#f3eee4; --peach:#f4a78f; --yellow:#f1de81; --pink:#e7a5c4; --ink:#271f29; --line:rgba(46,21,56,.24); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--cream); font-family:Manrope,Arial,sans-serif; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
.header,main,footer { max-width:1480px; margin:auto; }
.header { min-height:96px; padding:0 4.5vw; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.identity { display:flex; align-items:center; gap:13px; }
.monogram { width:42px; height:42px; display:grid; place-items:center; color:var(--cream); background:var(--plum); border-radius:50%; font:500 13px/1 DM Mono,monospace; }
.wordmark { font-size:13px; font-weight:600; letter-spacing:.1em; }
.wordmark small { display:block; margin-top:3px; color:#765f73; font:500 7px/1.3 DM Mono,monospace; letter-spacing:.17em; }
nav { display:flex; gap:42px; font:500 11px/1 DM Mono,monospace; }
nav a { transition:color .2s; }
nav a:hover { color:#a64268; }
.header-mail { padding-bottom:6px; border-bottom:1px solid var(--plum); font:500 11px/1 DM Mono,monospace; }
.header-mail span { margin-left:15px; }

.hero { min-height:730px; padding:38px 4.5vw 62px; display:grid; grid-template-rows:auto 1fr auto; overflow:hidden; border-bottom:1px solid var(--line); }
.edition { display:flex; justify-content:space-between; color:#765f73; font:500 9px/1 DM Mono,monospace; text-transform:uppercase; letter-spacing:.12em; }
.edition span { color:#a64268; }
.hero-title { position:relative; display:flex; align-items:center; }
h1,h2,h3,p { margin-top:0; }
h1,h2 { font-weight:500; letter-spacing:-.055em; }
h1 { margin:0; max-width:1160px; position:relative; z-index:1; font-size:clamp(63px,8.4vw,126px); line-height:.9; }
h1 em { color:#a64268; font-family:"Playfair Display",Georgia,serif; font-weight:600; }
.title-orbit { width:410px; height:410px; position:absolute; right:-5%; top:50%; border:1px solid rgba(46,21,56,.3); border-radius:50%; transform:translateY(-50%); }
.title-orbit::before,.title-orbit::after { content:""; position:absolute; border:1px solid rgba(46,21,56,.22); border-radius:50%; }
.title-orbit::before { inset:60px; }.title-orbit::after { inset:130px; }
.title-orbit i { position:absolute; display:block; border-radius:50%; }
.title-orbit i:nth-child(1) { width:35px; height:35px; left:28px; top:91px; background:var(--peach); }
.title-orbit i:nth-child(2) { width:21px; height:21px; right:68px; top:32px; background:var(--yellow); }
.title-orbit i:nth-child(3) { width:50px; height:50px; right:7px; bottom:89px; background:var(--pink); }
.hero-bottom { display:grid; grid-template-columns:1.2fr .6fr .8fr; gap:45px; align-items:end; }
.hero-bottom p { max-width:510px; margin:0; color:#665765; line-height:1.7; }
.hero-bottom a { width:max-content; padding-bottom:7px; border-bottom:1px solid var(--ink); font:500 10px/1 DM Mono,monospace; }
.hero-bottom a span { margin-left:18px; }
.coordinates { text-align:right; color:#8e788b; font:500 8px/1.5 DM Mono,monospace; letter-spacing:.09em; }

.statement { padding:130px 4.5vw; display:grid; grid-template-columns:.18fr 1.5fr .5fr; gap:5vw; border-bottom:1px solid var(--line); }
.vertical-label { padding-top:5px; writing-mode:vertical-rl; color:#8e788b; font:500 9px/1 DM Mono,monospace; letter-spacing:.16em; }
.chapter { margin:0 0 40px; color:#a64268; font:500 9px/1 DM Mono,monospace; text-transform:uppercase; letter-spacing:.1em; }
.statement h2,.section-header h2,.process h2,.contact h2 { margin:0; font-size:clamp(42px,5.3vw,79px); line-height:1.08; }
.statement h2 span { color:#a64268; font-family:"Playfair Display",Georgia,serif; font-style:italic; }
.statement-detail { max-width:820px; margin-top:55px; display:grid; grid-template-columns:1fr 1fr; gap:45px; color:#665765; line-height:1.75; }
.editor-note { min-height:330px; padding:28px; position:relative; background:var(--peach); border-radius:50% 50% 4px 4px; }
.editor-note span { display:block; padding-bottom:13px; border-bottom:1px solid rgba(46,21,56,.35); font:500 8px/1 DM Mono,monospace; letter-spacing:.12em; }
.editor-note b { display:block; margin-top:42px; font-size:22px; line-height:1.35; font-weight:500; }
.editor-note i { position:absolute; right:26px; bottom:20px; font-size:35px; font-style:normal; }

.practice { padding:125px 4.5vw 135px; background:#fffaf1; border-bottom:1px solid var(--line); }
.section-header { display:grid; grid-template-columns:.55fr 1.45fr; gap:5vw; }
.practice-grid { margin-top:75px; display:grid; grid-template-columns:repeat(3,1fr); gap:17px; }
.practice-card { min-height:485px; padding:27px; position:relative; overflow:hidden; border-radius:210px 210px 12px 12px; }
.peach { background:var(--peach); }.yellow { background:var(--yellow); }.pink { background:var(--pink); }
.card-index { font:500 9px/1 DM Mono,monospace; }
.card-art { height:220px; position:relative; }
.art-network i { width:70px; height:70px; position:absolute; border:1px solid var(--plum); border-radius:50%; }
.art-network i:nth-child(1) { left:12%; top:47%; background:var(--cream); }
.art-network i:nth-child(2) { left:43%; top:14%; background:var(--plum); }
.art-network i:nth-child(3) { right:10%; top:50%; background:var(--yellow); }
.art-network i:nth-child(4) { width:65%; height:1px; left:18%; top:55%; border:0; border-top:1px solid var(--plum); border-radius:0; transform:rotate(-5deg); }
.art-focus i { position:absolute; border:1px solid var(--plum); border-radius:50%; }
.art-focus i:nth-child(1) { width:180px; height:180px; left:50%; top:16px; transform:translateX(-50%); }
.art-focus i:nth-child(2) { width:105px; height:105px; left:50%; top:53px; background:var(--cream); transform:translateX(-50%); }
.art-focus i:nth-child(3) { width:35px; height:35px; left:50%; top:87px; background:var(--plum); transform:translateX(-50%); }
.art-motion i { width:100px; height:135px; position:absolute; top:35px; border:1px solid var(--plum); border-radius:55px 55px 4px 4px; }
.art-motion i:nth-child(1) { left:8%; background:var(--cream); transform:rotate(-9deg); }
.art-motion i:nth-child(2) { left:35%; background:var(--yellow); }
.art-motion i:nth-child(3) { right:7%; background:var(--plum); transform:rotate(9deg); }
.practice-card h3 { margin:0 0 12px; font-size:25px; font-weight:600; }
.practice-card p { max-width:340px; margin:0; line-height:1.65; }

.process { padding:125px 4.5vw; display:grid; grid-template-columns:.85fr 1.15fr; gap:8vw; color:var(--cream); background:var(--plum); }
.chapter.light { color:var(--peach); }
.process-intro > p:last-child { max-width:420px; margin:35px 0 0; color:#c7b7c4; line-height:1.7; }
.process-list { margin:0; padding:0; list-style:none; border-top:1px solid rgba(243,238,228,.25); }
.process-list li { min-height:150px; display:grid; grid-template-columns:50px 1fr 35px; gap:25px; align-items:center; border-bottom:1px solid rgba(243,238,228,.25); }
.process-list li > span { color:var(--peach); font:500 9px/1 DM Mono,monospace; }
.process-list h3 { margin:0 0 7px; font-size:27px; font-weight:500; }
.process-list p { margin:0; color:#c7b7c4; line-height:1.5; }
.process-list b { color:var(--yellow); font-size:23px; font-weight:400; }

.contact { min-height:700px; padding:125px 4.5vw 65px; display:grid; grid-template-columns:.6fr 1.4fr; grid-template-rows:1fr auto; gap:35px 7vw; background:var(--yellow); overflow:hidden; }
.contact-mark { width:330px; height:450px; position:relative; display:grid; place-items:center; background:var(--pink); border-radius:180px 180px 8px 8px; transform:rotate(-5deg); }
.contact-mark span { color:var(--plum); font-family:"Playfair Display",Georgia,serif; font-size:180px; font-style:italic; }
.contact-mark i { width:95px; height:95px; position:absolute; right:-35px; top:70px; background:var(--peach); border-radius:50%; }
.contact-content { align-self:center; }
.contact h2 { margin-bottom:45px; }
.email { display:flex; width:max-content; max-width:100%; padding-bottom:9px; gap:35px; border-bottom:1px solid var(--ink); font:500 clamp(17px,2vw,27px)/1 DM Mono,monospace; overflow-wrap:anywhere; }
.contact-info { grid-column:2; display:grid; grid-template-columns:.6fr 1.4fr; gap:35px; padding-top:25px; border-top:1px solid rgba(46,21,56,.3); }
.contact-info small,.contact-info strong { display:block; }
.contact-info small { margin-bottom:8px; font:500 8px/1 DM Mono,monospace; letter-spacing:.1em; }
.contact-info strong { font-size:13px; line-height:1.4; }
footer { min-height:115px; padding:0 4.5vw; display:flex; align-items:center; justify-content:space-between; gap:30px; border-top:1px solid var(--line); color:#765f73; font:500 9px/1.5 DM Mono,monospace; }
footer p { margin:0; text-align:center; }

@media (max-width:980px) {
  nav { display:none; }
  .statement { grid-template-columns:1fr; }
  .vertical-label { writing-mode:initial; }
  .editor-note { max-width:350px; }
  .practice-grid { grid-template-columns:1fr; }
  .practice-card { min-height:430px; border-radius:230px 230px 12px 12px; }
  .process { grid-template-columns:1fr; }
  .contact { grid-template-columns:1fr; }
  .contact-mark { width:270px; height:350px; }
  .contact-info { grid-column:auto; }
}
@media (max-width:640px) {
  .header { min-height:78px; }
  .wordmark { display:none; }
  .hero { min-height:680px; padding-top:30px; }
  h1 { font-size:clamp(55px,17vw,78px); }
  .title-orbit { width:300px; height:300px; right:-45%; }
  .hero-bottom { grid-template-columns:1fr; gap:24px; }
  .coordinates { display:none; }
  .statement,.practice,.process,.contact { padding:85px 6vw; }
  .statement-detail,.section-header { grid-template-columns:1fr; }
  .statement h2,.section-header h2,.process h2,.contact h2 { font-size:42px; }
  .practice-grid { margin-top:50px; }
  .process-list li { padding:24px 0; grid-template-columns:35px 1fr 20px; }
  .contact { padding-bottom:60px; }
  .contact-mark { width:210px; height:280px; }
  .contact-mark span { font-size:120px; }
  .email { width:100%; justify-content:space-between; gap:8px; font-size:13px; }
  .contact-info { grid-template-columns:1fr; }
  footer { padding:34px 5vw; flex-direction:column; }
}
@media (prefers-reduced-motion:reduce) { html{scroll-behavior:auto} *,*::before,*::after{transition:none!important} }