:root { --v61-ink:#171517; --v61-paper:#f5f0e9; --v61-pink:#f23183; --v61-pink-deep:#cc1263; --v61-muted:#665f63; --v61-line:rgba(245,240,233,.22); --v61-dark-line:rgba(23,21,23,.18); --v61-max:1280px; }
* { box-sizing:border-box; } html { overflow-x:clip; scroll-behavior:smooth; background:var(--v61-ink); } body { margin:0; color:var(--v61-paper); background:var(--v61-ink); font-family:Arial,Helvetica,sans-serif; line-height:1.45; overflow-x:clip; } a { color:inherit; text-underline-offset:.18em; text-decoration-thickness:1px; } a:focus-visible,button:focus-visible { outline:3px solid var(--v61-pink); outline-offset:5px; } .v61-skip { position:absolute; z-index:100; left:1rem; top:-5rem; background:var(--v61-pink); color:var(--v61-ink); padding:.75rem 1rem; font-weight:800; } .v61-skip:focus { top:1rem; } .v61-wrap { width:min(calc(100% - 3rem),var(--v61-max)); margin-inline:auto; }
.v61-header { position:relative; z-index:10; border-bottom:1px solid var(--v61-line); background:rgba(23,21,23,.9); } .v61-nav { min-height:86px; display:flex; align-items:center; justify-content:space-between; gap:1rem; } .v61-logo { width:170px; display:block; background:#fff; padding:.33rem .54rem; line-height:0; } .v61-logo img { width:100%; height:auto; } .v61-links { display:flex; align-items:center; gap:1.35rem; list-style:none; padding:0; margin:0; font-size:.84rem; font-weight:800; } .v61-links a { text-decoration:none; padding-block:.5rem; border-bottom:2px solid transparent; } .v61-links a:hover { border-color:var(--v61-pink); } .v61-menu { display:none; border:1px solid var(--v61-line); color:var(--v61-paper); background:transparent; padding:.65rem .8rem; font:800 .84rem/1 Arial,sans-serif; } .v61-menu span { color:var(--v61-pink); font-size:1.1rem; }
.v61-hero { min-height:min(860px,calc(100vh - 86px)); position:relative; isolation:isolate; overflow:hidden; padding:clamp(5.5rem,10vw,9.6rem) 0 1.8rem; } .v61-hero::before { content:''; position:absolute; z-index:-2; inset:0; background:linear-gradient(112deg,var(--v61-ink) 0 52%,#251820 100%); } .v61-hero::after { content:''; position:absolute; z-index:-1; width:min(59vw,800px); height:min(59vw,800px); right:-15vw; top:-16vw; border:1px solid rgba(245,240,233,.24); border-radius:51% 49% 54% 46% / 50% 45% 55% 50%; box-shadow:0 0 0 80px rgba(242,49,131,.07),0 0 0 170px rgba(242,49,131,.035); animation:v61-orbit 20s ease-in-out infinite alternate; } .v61-hero-light { position:absolute; z-index:-1; width:min(64vw,900px); height:min(62vw,820px); right:-16vw; top:-14vw; background:radial-gradient(ellipse at 42% 46%,rgba(242,49,131,.74) 0 2%,rgba(242,49,131,.32) 18%,rgba(166,67,144,.15) 38%,transparent 67%); filter:blur(8px); transform:rotate(-16deg); animation:v61-light 18s ease-in-out infinite alternate; } .v61-hero-grid { min-height:550px; display:grid; grid-template-columns:minmax(0,1.2fr) minmax(220px,.44fr); gap:2rem; align-items:end; }
.v61-kicker { display:flex; align-items:center; gap:.7rem; margin:0 0 1.1rem; color:var(--v61-pink); font-size:.72rem; font-weight:900; letter-spacing:.14em; text-transform:uppercase; } .v61-kicker::before { content:''; width:.56rem; height:.56rem; background:currentColor; border-radius:50%; } .v61-kicker--dark { color:var(--v61-pink-deep); } h1,h2,h3,p { margin-top:0; } h1,h2,h3 { letter-spacing:-.075em; line-height:.88; } h1,h2 { font-family:Arial Black,Arial,sans-serif; text-transform:uppercase; } h1 { max-width:980px; margin-bottom:1.85rem; font-size:clamp(4.8rem,11.6vw,10.8rem); } h1 span { color:var(--v61-pink); } .v61-intro { max-width:640px; color:#d7d0d2; font-size:clamp(1.05rem,1.9vw,1.35rem); } .v61-actions { display:flex; flex-wrap:wrap; align-items:center; gap:1.4rem; margin-top:2.15rem; } .v61-button { min-height:52px; display:inline-flex; align-items:center; justify-content:center; gap:.65rem; padding:.9rem 1.08rem; border:1px solid currentColor; font-size:.88rem; font-weight:900; text-decoration:none; transition:transform .2s ease,background .2s ease,color .2s ease; } .v61-button:hover { transform:translateY(-3px); } .v61-button--pink { color:var(--v61-ink); background:var(--v61-pink); border-color:var(--v61-pink); } .v61-button--ink { color:var(--v61-paper); background:var(--v61-ink); border-color:var(--v61-ink); } .v61-text-link,.v61-inline-link { font-size:.88rem; font-weight:900; } .v61-text-link span,.v61-inline-link span { color:var(--v61-pink); } .v61-hero-aside { align-self:start; max-width:245px; padding-top:.4rem; justify-self:end; text-align:right; } .v61-hero-aside p { margin:0; color:#d2c9cd; font-size:.86rem; } .v61-orbit { width:84px; height:84px; display:block; margin:1rem 0 0 auto; border:1px solid rgba(245,240,233,.6); border-radius:50%; position:relative; } .v61-orbit i { position:absolute; top:50%; left:-8px; width:15px; height:15px; border-radius:50%; background:var(--v61-pink); transform:translateY(-50%); } .v61-hero-footer { display:flex; justify-content:space-between; gap:1rem; padding-top:1.1rem; border-top:1px solid var(--v61-line); color:#d5cccf; font-size:.76rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; } .v61-hero-footer span:last-child { color:var(--v61-pink); }
.v61-section { padding:clamp(5rem,10vw,9rem) 0; } .v61-section--paper { color:var(--v61-ink); background:var(--v61-paper); } .v61-section--ink { color:var(--v61-paper); background:var(--v61-ink); } .v61-split { display:grid; grid-template-columns:.97fr 1.03fr; gap:clamp(3rem,9vw,9rem); } h2 { max-width:790px; margin-bottom:1.45rem; font-size:clamp(3rem,6.3vw,6.7rem); } h2 em { color:var(--v61-pink-deep); font-style:normal; } .v61-prose { padding-top:.25rem; } .v61-prose p { max-width:560px; color:var(--v61-muted); font-size:clamp(1.05rem,1.6vw,1.28rem); } .v61-inline-link { display:inline-block; margin-top:1rem; }
.v61-statement-section { position:relative; overflow:hidden; } .v61-statement-section::before { content:'73'; position:absolute; right:-1vw; top:-6vw; color:rgba(242,49,131,.08); font:900 clamp(16rem,38vw,41rem)/.72 Arial,sans-serif; letter-spacing:-.16em; } .v61-statement { position:relative; z-index:1; margin-bottom:1rem; font-size:clamp(4.3rem,10.4vw,10.9rem); } .v61-statement span { color:var(--v61-pink); } .v61-statement-copy { position:relative; z-index:1; max-width:510px; color:#d4ccce; font-size:1.13rem; }
.v61-section-head { display:grid; grid-template-columns:1.12fr .48fr; gap:2rem; align-items:end; margin-bottom:2.5rem; } .v61-section-head h2 { margin-bottom:0; } .v61-section-head > p { margin:0; color:var(--v61-muted); font-size:.9rem; } .v61-work-grid { display:grid; grid-template-columns:1.05fr .95fr .8fr; gap:1rem; } .v61-project { display:flex; flex-direction:column; min-height:510px; padding:1rem; } .v61-project--pink { color:var(--v61-ink); background:var(--v61-pink); } .v61-project--dark { color:var(--v61-paper); background:var(--v61-ink); } .v61-project--line { color:var(--v61-ink); border:1px solid var(--v61-dark-line); } .v61-project-art { min-height:244px; display:flex; align-items:end; justify-content:space-between; position:relative; overflow:hidden; padding:1rem; border-bottom:1px solid currentColor; } .v61-project-art::before { content:''; position:absolute; inset:12% -14% 19% 34%; border:1px solid currentColor; border-radius:50%; transform:rotate(-23deg); opacity:.8; } .v61-project--dark .v61-project-art::before { border-width:20px; opacity:.25; } .v61-project-art span { position:relative; z-index:1; font:900 .76rem Arial,sans-serif; letter-spacing:.12em; } .v61-project-art i { position:relative; z-index:1; font:900 clamp(3rem,7vw,6rem)/.76 Arial,sans-serif; letter-spacing:-.11em; font-style:normal; } .v61-project-meta { display:flex; justify-content:space-between; gap:.7rem; padding-top:1rem; } .v61-project-meta p { margin:0; font-weight:900; } .v61-project-meta span { font-size:.71rem; font-weight:800; letter-spacing:.08em; text-align:right; text-transform:uppercase; } .v61-project > p { margin:auto 0 0; max-width:350px; font-size:.91rem; }
.v61-capability-layout { display:grid; grid-template-columns:.78fr 1.22fr; gap:clamp(2.5rem,7vw,8rem); } .v61-sticky-title { align-self:start; position:sticky; top:1.5rem; } .v61-sticky-title h2 { margin-bottom:1.2rem; font-size:clamp(3rem,5.1vw,5.7rem); } .v61-sticky-title > p:last-child { max-width:430px; color:#d4ccce; font-size:1.04rem; } .v61-capability-list { list-style:none; padding:0; margin:0; border-top:1px solid var(--v61-line); } .v61-capability-list li { display:grid; grid-template-columns:4.4rem 1fr; gap:1.1rem; padding:1.7rem 0; border-bottom:1px solid var(--v61-line); } .v61-capability-list span,.v61-method span { color:var(--v61-pink); font-size:.76rem; font-weight:900; letter-spacing:.12em; } .v61-capability-list h3,.v61-method h3 { margin:0 0 .4rem; font-size:clamp(1.7rem,2.6vw,2.6rem); font-family:Arial Black,Arial,sans-serif; text-transform:uppercase; } .v61-capability-list p { max-width:500px; margin:0; color:#d5cdcf; }
.v61-method-heading { display:grid; grid-template-columns:.8fr 1.2fr; gap:2rem; align-items:end; margin-bottom:3rem; } .v61-method-heading h2 { margin-bottom:0; } .v61-method { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--v61-dark-line); } .v61-method article { min-height:260px; padding:1.2rem; border-right:1px solid var(--v61-dark-line); } .v61-method article:first-child { padding-left:0; } .v61-method article:last-child { border-right:0; } .v61-method span { color:var(--v61-pink-deep); } .v61-method h3 { margin:2.7rem 0 .7rem; font-size:1.45rem; } .v61-method p { margin:0; color:var(--v61-muted); font-size:.92rem; }
.v61-section--pink { color:var(--v61-ink); background:var(--v61-pink); } .v61-continuity { position:relative; overflow:hidden; } .v61-continuity::after { content:''; position:absolute; width:min(62vw,800px); height:min(62vw,800px); right:-24vw; bottom:-45vw; border:1px solid rgba(23,21,23,.55); border-radius:50%; box-shadow:0 0 0 72px rgba(245,240,233,.1),0 0 0 154px rgba(23,21,23,.06); } .v61-continuity-grid { position:relative; z-index:1; display:grid; grid-template-columns:1fr .82fr; gap:clamp(2.5rem,8vw,9rem); } .v61-continuity h2 { margin-bottom:0; color:var(--v61-ink); } .v61-continuity-grid > div:last-child { align-self:end; } .v61-continuity-grid > div:last-child p { max-width:480px; font-size:1.12rem; } .v61-continuity-grid .v61-button { margin-top:1rem; }
.v61-footer { padding:2rem 0 0; background:var(--v61-ink); } .v61-footer-grid { display:flex; justify-content:space-between; gap:2rem; padding-bottom:2rem; } .v61-footer-grid p { margin-bottom:.4rem; font-weight:900; } .v61-footer-grid span { color:var(--v61-pink); font-size:.78rem; font-weight:900; letter-spacing:.08em; text-transform:uppercase; } .v61-footer-grid > div:last-child { display:flex; flex-wrap:wrap; justify-content:end; gap:1rem; font-size:.82rem; font-weight:800; } .v61-social-links { display:flex; align-items:center; } .v61-social-links a { display:grid; width:44px; height:44px; place-items:center; border-radius:50%; } .v61-social-links img { display:block; width:26px; height:26px; } .v61-social-links a:hover { transform:translateY(-2px); } .v61-social-links a:focus-visible { outline:2px solid var(--v61-pink); outline-offset:3px; } .v61-private { margin:0; padding:.8rem 1.5rem; border-top:1px solid var(--v61-line); color:#ada4a8; text-align:center; font-size:.72rem; }
@keyframes v61-light { from { transform:rotate(-16deg) translate3d(-2%,-1%,0) scale(.96); opacity:.65; } to { transform:rotate(-9deg) translate3d(3%,4%,0) scale(1.06); opacity:1; } } @keyframes v61-orbit { from { transform:rotate(-7deg) scale(.96); border-radius:51% 49% 54% 46% / 50% 45% 55% 50%; } to { transform:rotate(8deg) scale(1.04); border-radius:43% 57% 47% 53% / 57% 44% 56% 43%; } } html[data-v61-motion="off"] *,html[data-v61-motion="off"] *::before,html[data-v61-motion="off"] *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } @media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } }
@media (max-width:900px) { .v61-work-grid { grid-template-columns:1fr 1fr; } .v61-project--line { grid-column:1 / -1; min-height:380px; } .v61-method { grid-template-columns:1fr 1fr; } .v61-method article:nth-child(2) { border-right:0; } .v61-method article:nth-child(-n + 2) { border-bottom:1px solid var(--v61-dark-line); } .v61-method article:nth-child(3) { padding-left:0; } }
@media (max-width:780px) { .v61-wrap { width:min(calc(100% - 2rem),var(--v61-max)); } .v61-nav { min-height:74px; } .v61-logo { width:142px; } .v61-menu { display:block; } .v61-links { display:none; position:absolute; top:74px; left:0; right:0; padding:1rem; align-items:stretch; flex-direction:column; gap:0; border-bottom:1px solid var(--v61-line); background:var(--v61-ink); } .v61-links[data-open="true"] { display:flex; } .v61-links a { display:block; padding:.7rem 0; } .v61-hero { min-height:auto; padding-top:4.6rem; } .v61-hero-grid,.v61-split,.v61-section-head,.v61-capability-layout,.v61-method-heading,.v61-continuity-grid { grid-template-columns:1fr; } .v61-hero-grid { min-height:0; } .v61-hero-aside { justify-self:start; text-align:left; max-width:260px; margin-top:1.6rem; } .v61-orbit { margin-left:0; } .v61-hero::after { width:86vw; height:86vw; right:-42vw; top:2rem; } .v61-hero-light { width:98vw; height:98vw; right:-42vw; top:0; } h1 { font-size:clamp(3.2rem,16vw,6.5rem); } h2 { font-size:clamp(3rem,14vw,5rem); } .v61-hero-footer { display:grid; font-size:.67rem; } .v61-statement { font-size:clamp(4rem,18vw,7rem); } .v61-section-head > p { max-width:470px; } .v61-work-grid { grid-template-columns:1fr; } .v61-project,.v61-project--line { grid-column:auto; min-height:420px; } .v61-project-art { min-height:210px; } .v61-sticky-title { position:static; } .v61-method { grid-template-columns:1fr; } .v61-method article,.v61-method article:nth-child(2) { min-height:auto; padding:1.2rem 0; border-right:0; border-bottom:1px solid var(--v61-dark-line); } .v61-method article:last-child { border-bottom:0; } .v61-method h3 { margin-top:1.2rem; } .v61-continuity::after { width:120vw; height:120vw; right:-58vw; bottom:-42vw; } .v61-footer-grid { display:grid; } .v61-footer-grid > div:last-child { justify-content:start; } }